New translations messages.json (German) (#540)

* New translations messages.json (French)

* New translations messages.json (Dutch)

* New translations messages.json (English, United Kingdom)

* New translations messages.json (Estonian)

* New translations messages.json (Portuguese, Brazilian)

* New translations messages.json (Chinese Traditional)

* New translations messages.json (Chinese Simplified)

* New translations messages.json (Ukrainian)

* New translations messages.json (Swedish)

* New translations messages.json (Russian)

* New translations messages.json (Portuguese)

* New translations messages.json (Polish)

* New translations messages.json (Korean)

* New translations messages.json (Spanish)

* New translations messages.json (Japanese)

* New translations messages.json (Italian)

* New translations messages.json (Hungarian)

* New translations messages.json (Hebrew)

* New translations messages.json (Finnish)

* New translations messages.json (Greek)

* New translations messages.json (German)

* New translations messages.json (Czech)

* New translations messages.json (Catalan)

* New translations messages.json (Bulgarian)

* New translations messages.json (Norwegian Bokmal)

.dockerignore

@@ -0,0 +1,3 @@
+*
+!build/*
+!entrypoint.sh

.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Set default charset
+[*.{js,ts,scss,html}]
+charset = utf-8
+indent_style = space
+indent_size = 4

.gitattributes

@@ -0,0 +1,3 @@
+*.sh eol=lf
+.dockerignore eol=lf
+dockerfile eol=lf

.gitignore

@@ -0,0 +1,13 @@
+.vs
+.idea
+.DS_Store
+node_modules
+npm-debug.log
+vwd.webinfo
+css/
+dist/
+*.pem
+*.crx
+*.zip
+build/
+!dev-server.shared.pem

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "jslib"]
+	path = jslib
+	url = https://github.com/bitwarden/jslib.git
+	branch = master

CNAME

@@ -1 +0,0 @@
-vault.bitwarden.com

CONTRIBUTING.md

@@ -0,0 +1,13 @@
+Code contributions are welcome! Please commit any pull requests against the `master` branch.
+
+# Localization (l10n)
+
+[![Crowdin](https://d322cqt584bo4o.cloudfront.net/bitwarden-web/localized.svg)](https://crowdin.com/project/bitwarden-web)
+
+We use a translation tool called [Crowdin](https://crowdin.com) to help manage our localization efforts across many different languages.
+
+If you are interested in helping translate the Bitwarden web vault into another language (or make a translation correction), please register an account at Crowdin and join our project here: https://crowdin.com/project/bitwarden-web
+
+If the language that you are interested in translating is not already listed, create a new account on Crowdin, join the project, and contact the project owner (https://crowdin.com/profile/kspearrin).
+
+You can read Crowdin's getting started guide for translators here: https://support.crowdin.com/crowdin-intro/

Dockerfile

@@ -0,0 +1,20 @@
+FROM bitwarden/server
+
+LABEL com.bitwarden.product="bitwarden"
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends \
+        gosu \
+        curl \
+&& rm -rf /var/lib/apt/lists/*
+
+ENV ASPNETCORE_URLS http://+:5000
+WORKDIR /app
+EXPOSE 5000
+COPY ./build .
+COPY entrypoint.sh /
+RUN chmod +x /entrypoint.sh
+
+HEALTHCHECK CMD curl -f http://localhost:5000 || exit 1
+
+ENTRYPOINT ["/entrypoint.sh"]

ISSUE_TEMPLATE.md

@@ -0,0 +1,5 @@
+<!--
+Please do not submit feature requests. The [Community Forums][1] has a
+section for submitting, voting for, and discussing product feature requests.
+[1]: https://community.bitwarden.com
+-->

LICENSE.txt

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is 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.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  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.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  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 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. Use with the GNU Affero General Public License.
+
+  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 Affero 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 special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU 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 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 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 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 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 General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    {project}  Copyright (C) {year}  {fullname}
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  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 GPL, see
+<http://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.

README.md

@@ -0,0 +1,60 @@
+<p align="center">
+    <img src="https://raw.githubusercontent.com/bitwarden/brand/master/screenshots/web-vault-macbook.png" alt="" width="600" height="358" />
+</p>
+<p align="center">
+    The Bitwarden web project is an Angular application that powers the web vault (https://vault.bitwarden.com/).
+</p>
+<p align="center">
+  <a href="https://ci.appveyor.com/project/bitwarden/web/branch/master" target="_blank">
+    <img src="https://ci.appveyor.com/api/projects/status/github/bitwarden/web?branch=master&svg=true" alt="appveyor build" />
+  </a>
+  <a href="https://crowdin.com/project/bitwarden-web" target="_blank">
+    <img src="https://d322cqt584bo4o.cloudfront.net/bitwarden-web/localized.svg" alt="Crowdin" />
+  </a>
+  <a href="https://hub.docker.com/u/bitwarden/" target="_blank">
+    <img src="https://img.shields.io/docker/pulls/bitwarden/web.svg" alt="DockerHub" />
+  </a>
+  <a href="https://gitter.im/bitwarden/Lobby" target="_blank">
+    <img src="https://badges.gitter.im/bitwarden/Lobby.svg" alt="gitter chat" />
+  </a>
+</p>
+
+## Build/Run
+
+### Requirements
+
+- [Node.js](https://nodejs.org) v8.11 or greater
+
+### Run the app
+
+```
+npm install
+npm run build:watch
+```
+
+You can now access the web vault in your browser at `https://localhost:8080`. You can adjust your API endpoint settings in `src/app/services/services.module.ts` by altering the `apiService.setUrls` call. For example:
+
+```typescript
+await apiService.setUrls({
+    base: isDev ? null : window.location.origin,
+    api: isDev ? 'http://mylocalapi' : null,
+    identity: isDev ? 'http://mylocalidentity' : null,
+});
+```
+
+If you want to point the development web vault to the production APIs, you can set:
+
+```typescript
+await apiService.setUrls({
+    base: null,
+    api: 'https://api.bitwarden.com',
+    identity: 'https://identity.bitwarden.com',
+});
+```
+
+
+## Contribute
+
+Code contributions are welcome! Please commit any pull requests against the `master` branch.
+
+Security audits and feedback are welcome. Please open an issue or email us privately if the report is sensitive in nature. You can read our security policy in the [`SECURITY.md`](SECURITY.md) file.

SECURITY.md

@@ -0,0 +1,45 @@
+Bitwarden believes that working with security researchers across the globe is crucial to keeping our
+users safe. If you believe you've found a security issue in our product or service, we encourage you to
+notify us. We welcome working with you to resolve the issue promptly. Thanks in advance!
+
+# Disclosure Policy
+
+- Let us know as soon as possible upon discovery of a potential security issue, and we'll make every
+  effort to quickly resolve the issue.
+- Provide us a reasonable amount of time to resolve the issue before any disclosure to the public or a
+  third-party. We may publicly disclose the issue before resolving it, if appropriate. 
+- Make a good faith effort to avoid privacy violations, destruction of data, and interruption or
+  degradation of our service. Only interact with accounts you own or with explicit permission of the
+  account holder.
+- If you would like to encrypt your report, please use the PGP key with long ID
+  `0xDE6887086F892325FEC04CC0D847525B6931381F` (available in the public keyserver pool).
+
+# In-scope
+
+- Security issues in any current release of Bitwarden. This includes the web vault, browser extension,
+  and mobile apps (iOS and Android). Product downloads are available at https://bitwarden.com. Source
+  code is available at https://github.com/bitwarden.
+
+# Exclusions
+
+The following bug classes are out-of scope:
+
+- Bugs that are already reported on any of Bitwarden's issue trackers (https://github.com/bitwarden),
+  or that we already know of. Note that some of our issue tracking is private.
+- Issues in an upstream software dependency (ex: Xamarin, ASP.NET) which are already reported to the
+  upstream maintainer.
+- Attacks requiring physical access to a user's device.
+- Self-XSS
+- Issues related to software or protocols not under Bitwarden's control
+- Vulnerabilities in outdated versions of Bitwarden
+- Missing security best practices that do not directly lead to a vulnerability
+- Issues that do not have any impact on the general public
+
+While researching, we'd like to ask you to refrain from:
+
+- Denial of service
+- Spamming
+- Social engineering (including phishing) of Bitwarden staff or contractors
+- Any physical attempts against Bitwarden property or data centers
+
+Thank you for helping keep Bitwarden and our users safe!

appveyor.yml

@@ -0,0 +1,83 @@
+image:
+- Visual Studio 2017
+- Ubuntu1804
+
+branches:
+  except:
+    - l10n_master
+    - gh-pages
+
+services:
+- docker
+
+stack: node 10
+
+init:
+- ps: |
+    if($isWindows) {
+      Install-Product node 10
+    }
+
+install:
+- ps: |
+    $env:PACKAGE_VERSION = (Get-Content -Raw -Path .\package.json | ConvertFrom-Json).version
+    $env:PUSH_DOCKER = "false"
+    $env:PROD_DEPLOY = "false"
+    $env:TAG_NAME = ""
+    if($env:APPVEYOR_REPO_TAG -eq "true" -and $env:APPVEYOR_RE_BUILD -eq "True") {
+      $env:PROD_DEPLOY = "true"
+      $env:TAG_NAME = $env:APPVEYOR_REPO_TAG_NAME.TrimStart("v")
+      echo "This is a production deployment for ${env:TAG_NAME}."
+    }
+    if("${env:DOCKER_USERNAME}" -ne "" -and "${env:DOCKER_PASSWORD}" -ne "") {
+      $env:PUSH_DOCKER = "true"
+    }
+    if($isWindows) {
+      choco install cloc --no-progress
+      cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
+    }
+
+before_build:
+- node --version
+- npm --version
+- sh: |
+    if [ "${PUSH_DOCKER}" == "true" ]
+    then
+      echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+    fi
+- cmd: set "GIT_PATH=C:\Program Files\Git\mingw64\libexec\git-core"
+- cmd: set "PATH=%GIT_PATH%;%PATH%"
+
+build_script:
+- sh: chmod +x ./build.sh
+- ps: |
+    if($isLinux) {
+      ./build.sh
+      ./build.sh tag dev
+
+      if($env:PROD_DEPLOY -eq "true") {
+        ./build.sh tag beta
+        ./build.sh tag $env:TAG_NAME
+      }
+
+      docker images
+      
+      if($env:PUSH_DOCKER -eq "true") {
+        ./build.sh push dev
+
+        if($env:PROD_DEPLOY -eq "true") {
+          ./build.sh push beta
+          ./build.sh push latest
+          ./build.sh push $env:TAG_NAME
+        }
+      }
+    }
+- cmd: npm install
+- cmd: npm run build:prod
+
+after_build:
+- sh: |
+    if [ "${PUSH_DOCKER}" == "true" ]
+    then
+      docker logout
+    fi

build.sh

@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+set -e
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+echo ""
+
+if [ $# -gt 1 -a "$1" == "push" ]
+then
+    TAG=$2
+    echo "# Pushing Web ($TAG)"
+    echo ""
+    docker push bitwarden/web:$TAG
+elif [ $# -gt 1 -a "$1" == "tag" ]
+then
+    TAG=$2
+    echo "Tagging Web as '$TAG'"
+    docker tag bitwarden/web bitwarden/web:$TAG
+else
+    echo "# Building Web"
+
+    echo ""
+    echo "Building app"
+    echo "npm version $(npm --version)"
+    npm install
+    npm run sub:update
+    npm run dist:selfhost
+
+    echo ""
+    echo "Building docker image"
+    docker --version
+    docker build -t bitwarden/web $DIR/.
+fi

crowdin.yml

@@ -0,0 +1,11 @@
+files:
+  - source: /src/locales/en/messages.json
+    translation: /src/locales/%two_letters_code%/%original_file_name%
+    update_option: update_as_unapproved
+    languages_mapping:
+      two_letters_code:
+        pt-PT: pt_PT
+        pt-BR: pt_BR
+        zh-CN: zh_CN
+        zh-TW: zh_TW
+        en-GB: en_GB

dev-server.shared.pem

@@ -0,0 +1,45 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDaEy1cPw07irjg
+4wUgaxshW7oQrgVoNZYRROmdU20K22L+HyG2ahW6usiWw8+6fPgVve7Y1z+/GYsK
+DhaDdY1Ket3JvZHxoAJ/+6lYY+05PhtmYnyEZzZlnuYx/tu3vyGpsXqMpzL3ZrX2
+Mh2dWE7ZXKxsyig4wSDJhBPMrW8HKXLrLR/JPFhu/nz5MpRF5LfzWU13FEfmS43s
+PEkBCn5ZxhVX4eNclQhTl7oOo5LU+KCWn+C/GPQir7pdmMoYF6D5j3qtbsq9irPe
+qR7HsM9z6DnX+L0mF31P2S6OTgLT3kuWJn9vqLUwvQWGFvSSzpw7JgGBK3eX6zE9
+2koGWP9NAgMBAAECggEAIpwCie5TykxU1RQSfzegYaXuHLGRmB1RCMKYFOjlmGCD
+EHOeZRXnBvCX3x2KfT1SHhk7q9xVeJ20LE9aEVj5qIVhZ6AXZnKPkwI8uRN61afe
+r1wYCOdcgbo7LFoXQs0pqYXKPkJW217IqB8CBjO6p9KGZumago9cBb9ZaRVpVohZ
+c6YHeatrna2mPb/EUPHdT0RHHQ5Dz2ToPjCkDtxsNHLZLekR35WIMtCBlp0xY5hb
+5h54ZxnaMihvHTLa8L/pgxGEUsP+XFpdXkM1oREzh8tDRFcUL8mUVZq8bGyzALn5
+MxDhdXqxrnyD2cQ/cSqXLs1/2mh5eccU3g5IaNtrAQKBgQD0Q4K2UYXa8jWQu7jI
+b37zwr2EypLFjeluqF4fxs+oz3UYEXeBDK0Td19/tze6/XieKibKDtFrOZQwDDKC
+AVxD7Dm58T9Jf4LDHNYOfYL3X/E4H+JrVBh94s0B00jVJ6TnEQDMuLi+wMGtvTdW
+huxoNefIWKf73ozvxIF+nsyeDQKBgQDkjYoXkBtfNgQR42RVA0/UdLLDWWctMU4F
+sJYc1bLL3txbf+fK7QzbU/ggLMW0hv8/IdyirGJhW3G0K0yhpAOlPhe36qv4QyhD
+o2nFlRrzfzvGJAgH9b1s+VcL/cSIuv4aCkbv97DAoQGPzAWEKv5gY1iw1DsGgrz5
+svZUvd7WQQKBgQDPrp7yuTngQNP+bT3dXb9JLqjIwRwt0E1LgugUiIuDcnCSuDct
+iEOYK4UNKBDAckcd46T7Y8H3MwumFpjTJKj4L1+dk1tF+J6Lmnb99wVlozOLjsCK
+lQQF9NJt3OEuKvjwZeqSJfUeavHB8QGeFjXnHP4nwAmEA2M9cYzQxeAf+QKBgCbS
+U+6Er+GQT0iqk1RNZ7XyzJqaCQiII3Sb9iOXuPMgO9Xe+ARkF5b5wF/Wuw5bD+gt
+XEjVdzCKU9oCsNWUAnqC/Yxj9CoLXj9+9mx1U0qhBgo1/Jc9ipuEDuEejc+b06Wg
+sUP5krBlqNpAEX/Nvb+poFsI8a29b1QKrgTe64cBAoGALg92rZBG60N2n8fTokou
+f1fui8Ftb+vOVGv9CM6icmNuwXeMF40A33Hvx14XLFk6B5p5dtVyOR660rRv4HRV
+cBUm5wwCZjwR5Aj83XGR0PRbTNFNngHbawQiutSo6dw8cNNKCZMywVh2KX29dsLh
+0Yj++kb8+G1kzFonR8WWoC8=
+-----END PRIVATE KEY-----
+-----BEGIN CERTIFICATE-----
+MIICwzCCAaugAwIBAgIJAN5sbMfEx05qMA0GCSqGSIb3DQEBCwUAMBQxEjAQBgNV
+BAMTCWxvY2FsaG9zdDAeFw0xODA2MDUwMzMxNDhaFw0yODA2MDIwMzMxNDhaMBQx
+EjAQBgNVBAMTCWxvY2FsaG9zdDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
+ggEBANoTLVw/DTuKuODjBSBrGyFbuhCuBWg1lhFE6Z1TbQrbYv4fIbZqFbq6yJbD
+z7p8+BW97tjXP78ZiwoOFoN1jUp63cm9kfGgAn/7qVhj7Tk+G2ZifIRnNmWe5jH+
+27e/IamxeoynMvdmtfYyHZ1YTtlcrGzKKDjBIMmEE8ytbwcpcustH8k8WG7+fPky
+lEXkt/NZTXcUR+ZLjew8SQEKflnGFVfh41yVCFOXug6jktT4oJaf4L8Y9CKvul2Y
+yhgXoPmPeq1uyr2Ks96pHsewz3PoOdf4vSYXfU/ZLo5OAtPeS5Ymf2+otTC9BYYW
+9JLOnDsmAYErd5frMT3aSgZY/00CAwEAAaMYMBYwFAYDVR0RBA0wC4IJbG9jYWxo
+b3N0MA0GCSqGSIb3DQEBCwUAA4IBAQCBTn7szrcs+fSs1Q/a2O3ng35zcme6NRhp
+T65RP0ooj3tPT9QlTJyKjo9Yb2RW2RGVbQO86mkYe9N9wcZkzurZ6KDqsfBn3FkI
+eZA1G/za907Dt/25mOdrsav7NmFBwxo9iuZ/cozgneK1mAXOu4nDI5yYvAlvNA6E
+iXgls4WX1LtHL5b9YV7Jz27d5tTmGxEimakMBo+zr10vCtMCsTlDs/ChamnI7ljN
+7B4WIVUMI3xOZzqClLnSzFJNReAlapjtGtp1qH6Y+6aZ9OErIwZOjE9CYYvm6MbE
+CblXQ9Uifpwrc09TA5S2Y/9+VxUBF9xlxh8hkcGLTzlNFDzVWdmR
+-----END CERTIFICATE-----

entrypoint.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# Setup
+
+GROUPNAME="bitwarden"
+USERNAME="bitwarden"
+
+LUID=${LOCAL_UID:-0}
+LGID=${LOCAL_GID:-0}
+
+# Step down from host root to well-known nobody/nogroup user
+
+if [ $LUID -eq 0 ]
+then
+    LUID=65534
+fi
+if [ $LGID -eq 0 ]
+then
+    LGID=65534
+fi
+
+# Create user and group
+
+groupadd -o -g $LGID $GROUPNAME >/dev/null 2>&1 ||
+groupmod -o -g $LGID $GROUPNAME >/dev/null 2>&1
+useradd -o -u $LUID -g $GROUPNAME -s /bin/false $USERNAME >/dev/null 2>&1 ||
+usermod -o -u $LUID -g $GROUPNAME -s /bin/false $USERNAME >/dev/null 2>&1
+mkhomedir_helper $USERNAME
+
+# The rest...
+
+chown -R $USERNAME:$GROUPNAME /etc/bitwarden
+cp /etc/bitwarden/web/app-id.json /app/app-id.json
+chown -R $USERNAME:$GROUPNAME /app
+chown -R $USERNAME:$GROUPNAME /bitwarden_server
+
+exec gosu $USERNAME:$GROUPNAME dotnet /bitwarden_server/Server.dll \
+    /contentRoot=/app /webRoot=. /serveUnknown=false /webVault=true

gulpfile.js

@@ -0,0 +1,37 @@
+const gulp = require('gulp');
+const googleWebFonts = require('gulp-google-webfonts');
+const del = require('del');
+const package = require('./package.json');
+const fs = require('fs');
+
+const paths = {
+    node_modules: './node_modules/',
+    src: './src/',
+    build: './build/',
+    cssDir: './src/css/',
+};
+
+function clean() {
+    return del([paths.cssDir]);
+}
+
+function webfonts() {
+    return gulp.src('./webfonts.list')
+        .pipe(googleWebFonts({
+            fontsDir: 'webfonts',
+            cssFilename: 'webfonts.css',
+            format: 'woff',
+        }))
+        .pipe(gulp.dest(paths.cssDir));
+};
+
+function version(cb) {
+    fs.writeFileSync(paths.build + 'version.json', '{"version":"' + package.version + '"}');
+    cb();
+}
+
+exports.clean = clean;
+exports.webfonts = gulp.series(clean, webfonts);
+exports.prebuild = gulp.series(clean, webfonts);
+exports.version = version;
+exports.postdist = version;

package.json

@@ -0,0 +1,101 @@
+{
+  "name": "bitwarden-web",
+  "version": "2.14.0",
+  "license": "GPL-3.0",
+  "repository": "https://github.com/bitwarden/web",
+  "scripts": {
+    "sub:init": "git submodule update --init --recursive",
+    "sub:update": "git submodule update --remote",
+    "sub:pull": "git submodule foreach git pull origin master",
+    "postinstall": "npm run sub:init",
+    "symlink:win": "rm -rf ./jslib && cmd /c mklink /J .\\jslib ..\\jslib",
+    "symlink:mac": "npm run symlink:lin",
+    "symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib",
+    "build": "gulp prebuild && webpack",
+    "build:watch": "gulp prebuild && webpack-dev-server",
+    "build:prod": "gulp prebuild && cross-env NODE_ENV=production webpack",
+    "build:prod:watch": "gulp prebuild && cross-env NODE_ENV=production webpack-dev-server",
+    "build:selfhost": "gulp prebuild && cross-env SELF_HOST=true webpack-dev-server",
+    "build:selfhost:watch": "gulp prebuild && cross-env SELF_HOST=true webpack-dev-server",
+    "build:selfhost:prod": "gulp prebuild && cross-env SELF_HOST=true NODE_ENV=production webpack",
+    "build:selfhost:prod:watch": "gulp prebuild && cross-env SELF_HOST=true NODE_ENV=production webpack-dev-server",
+    "clean:l10n": "git push origin --delete l10n_master",
+    "dist": "npm run build:prod && gulp postdist",
+    "dist:selfhost": "npm run build:selfhost:prod && gulp postdist",
+    "deploy": "npm run dist && gh-pages -d build",
+    "deploy:dev": "npm run dist && gh-pages -d build -r git@github.com:kspearrin/bitwarden-web-dev.git",
+    "lint": "tslint src/**/*.ts || true",
+    "lint:fix": "tslint src/**/*.ts --fix"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^7.2.11",
+    "@ngtools/webpack": "^7.2.2",
+    "@types/jquery": "^3.3.6",
+    "@types/lunr": "^2.3.3",
+    "@types/node-forge": "^0.7.5",
+    "@types/papaparse": "^4.5.3",
+    "@types/webcrypto": "^0.0.28",
+    "@types/webpack": "^4.4.11",
+    "@types/zxcvbn": "^4.4.0",
+    "angular2-template-loader": "^0.6.2",
+    "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.5.2",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
+    "del": "^3.0.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "file-loader": "^2.0.0",
+    "gh-pages": "^1.2.0",
+    "gulp": "^4.0.0",
+    "gulp-google-webfonts": "^2.0.0",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.13.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.0",
+    "terser-webpack-plugin": "^1.2.3",
+    "ts-loader": "^5.3.3",
+    "tslint": "^5.12.1",
+    "tslint-loader": "^3.5.4",
+    "typescript": "3.2.4",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "dependencies": {
+    "@angular/animations": "7.2.1",
+    "@angular/cdk": "7.2.1",
+    "@angular/common": "7.2.1",
+    "@angular/compiler": "7.2.1",
+    "@angular/core": "7.2.1",
+    "@angular/forms": "7.2.1",
+    "@angular/platform-browser": "7.2.1",
+    "@angular/platform-browser-dynamic": "7.2.1",
+    "@angular/router": "7.2.1",
+    "@angular/upgrade": "7.2.1",
+    "@microsoft/signalr": "3.1.0",
+    "@microsoft/signalr-protocol-msgpack": "3.1.0",
+    "angular2-toaster": "6.1.0",
+    "angulartics2": "6.3.0",
+    "big-integer": "1.6.36",
+    "bootstrap": "4.3.1",
+    "braintree-web-drop-in": "1.13.0",
+    "core-js": "2.6.2",
+    "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
+    "font-awesome": "4.7.0",
+    "jquery": "3.4.1",
+    "lunr": "2.3.3",
+    "ngx-infinite-scroll": "7.0.1",
+    "node-forge": "0.7.6",
+    "papaparse": "4.6.0",
+    "popper.js": "1.14.4",
+    "qrious": "4.0.2",
+    "rxjs": "6.3.3",
+    "sweetalert2": "9.8.1",
+    "web-animations-js": "2.3.1",
+    "webcrypto-shim": "0.1.4",
+    "whatwg-fetch": "3.0.0",
+    "zone.js": "0.8.28",
+    "zxcvbn": "4.4.2"
+  }
+}

src/app-id.json

@@ -0,0 +1,15 @@
+{
+  "trustedFacets": [
+    {
+      "version": {
+        "major": 1,
+        "minor": 0
+      },
+      "ids": [
+        "https://vault.bitwarden.com",
+        "ios:bundle-id:com.8bit.bitwarden",
+        "android:apk-key-hash:dUGFzUzf3lmHSLBDBIv+WaFyZMI"
+      ]
+    }
+  ]
+}

src/app/accounts/accept-organization.component.html

@@ -0,0 +1,35 @@
+<div class="mt-5 d-flex justify-content-center" *ngIf="loading">
+    <div>
+        <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
+        <p class="text-center">
+            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
+        </p>
+    </div>
+</div>
+<div class="container" *ngIf="!loading && !authed">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'joinOrganization' | i18n}}</p>
+            <div class="card d-block">
+                <div class="card-body">
+                    <p class="text-center">
+                        {{orgName}}
+                        <strong class="d-block mt-2">{{email}}</strong>
+                    </p>
+                    <p>{{'joinOrganizationDesc' | i18n}}</p>
+                    <hr>
+                    <div class="d-flex">
+                        <a routerLink="/" [queryParams]="{email: email}" class="btn btn-primary btn-block">
+                            {{'logIn' | i18n}}
+                        </a>
+                        <a routerLink="/register" [queryParams]="{email: email}"
+                            class="btn btn-primary btn-block ml-2 mt-0">
+                            {{'createAccount' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/accounts/accept-organization.component.ts

@@ -0,0 +1,95 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import {
+    Toast,
+    ToasterService,
+} from 'angular2-toaster';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { OrganizationUserAcceptRequest } from 'jslib/models/request/organizationUserAcceptRequest';
+
+@Component({
+    selector: 'app-accept-organization',
+    templateUrl: 'accept-organization.component.html',
+})
+export class AcceptOrganizationComponent implements OnInit {
+    loading = true;
+    authed = false;
+    orgName: string;
+    email: string;
+    actionPromise: Promise<any>;
+
+    constructor(private router: Router, private toasterService: ToasterService,
+        private i18nService: I18nService, private route: ActivatedRoute,
+        private apiService: ApiService, private userService: UserService,
+        private stateService: StateService) { }
+
+    ngOnInit() {
+        let fired = false;
+        this.route.queryParams.subscribe(async (qParams) => {
+            if (fired) {
+                return;
+            }
+            fired = true;
+            await this.stateService.remove('orgInvitation');
+            let error = qParams.organizationId == null || qParams.organizationUserId == null || qParams.token == null;
+            let errorMessage: string = null;
+            if (!error) {
+                this.authed = await this.userService.isAuthenticated();
+                if (this.authed) {
+                    const request = new OrganizationUserAcceptRequest();
+                    request.token = qParams.token;
+                    try {
+                        this.actionPromise = this.apiService.postOrganizationUserAccept(qParams.organizationId,
+                            qParams.organizationUserId, request);
+                        await this.actionPromise;
+                        const toast: Toast = {
+                            type: 'success',
+                            title: this.i18nService.t('inviteAccepted'),
+                            body: this.i18nService.t('inviteAcceptedDesc'),
+                            timeout: 10000,
+                        };
+                        this.toasterService.popAsync(toast);
+                        this.router.navigate(['/vault']);
+                    } catch (e) {
+                        error = true;
+                        errorMessage = e.message;
+                    }
+                } else {
+                    await this.stateService.save('orgInvitation', qParams);
+                    this.email = qParams.email;
+                    this.orgName = qParams.organizationName;
+                    if (this.orgName != null) {
+                        // Fix URL encoding of space issue with Angular
+                        this.orgName = this.orgName.replace(/\+/g, ' ');
+                    }
+                }
+            }
+
+            if (error) {
+                const toast: Toast = {
+                    type: 'error',
+                    title: null,
+                    body: errorMessage != null ? this.i18nService.t('inviteAcceptFailedShort', errorMessage) :
+                        this.i18nService.t('inviteAcceptFailed'),
+                    timeout: 10000,
+                };
+                this.toasterService.popAsync(toast);
+                this.router.navigate(['/']);
+            }
+
+            this.loading = false;
+        });
+    }
+}

src/app/accounts/hint.component.html

@@ -0,0 +1,27 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'passwordHint' | i18n}}</p>
+            <div class="card d-block">
+                <div class="card-body">
+                    <div class="form-group">
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            appAutofocus inputmode="email" appInputVerbatim="false">
+                        <small class="form-text text-muted">{{'enterEmailToGetHint' | i18n}}</small>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <span [hidden]="form.loading">{{'submit' | i18n}}</span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/accounts/hint.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { HintComponent as BaseHintComponent } from 'jslib/angular/components/hint.component';
+
+@Component({
+    selector: 'app-hint',
+    templateUrl: 'hint.component.html',
+})
+export class HintComponent extends BaseHintComponent {
+    constructor(router: Router, i18nService: I18nService,
+        apiService: ApiService, platformUtilsService: PlatformUtilsService) {
+        super(router, i18nService, apiService, platformUtilsService);
+    }
+}

src/app/accounts/lock.component.html

@@ -0,0 +1,40 @@
+<form (ngSubmit)="submit()" class="container" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="text-center mb-4">
+                <i class="fa fa-lock fa-4x text-muted" aria-hidden="true"></i>
+            </p>
+            <p class="lead text-center mx-4 mb-4">{{'yourVaultIsLocked' | i18n}}</p>
+            <div class="card d-block">
+                <div class="card-body">
+                    <div class="form-group">
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
+                                required appAutofocus appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                (click)="togglePassword()">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </button>
+                        </div>
+                        <small class="text-muted form-text">
+                            {{'loggedInAsEmailOn' | i18n : email : webVaultHostname}}
+                        </small>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block">
+                            <i class="fa fa-unlock-alt" aria-hidden="true"></i>
+                            {{'unlock' | i18n}}
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary btn-block ml-2 mt-0" (click)="logOut()">
+                            {{'logOut' | i18n}}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/accounts/lock.component.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+import { UserService } from 'jslib/abstractions/user.service';
+import { VaultTimeoutService } from 'jslib/abstractions/vaultTimeout.service';
+
+import { RouterService } from '../services/router.service';
+
+import { LockComponent as BaseLockComponent } from 'jslib/angular/components/lock.component';
+
+@Component({
+    selector: 'app-lock',
+    templateUrl: 'lock.component.html',
+})
+export class LockComponent extends BaseLockComponent {
+    constructor(router: Router, i18nService: I18nService,
+        platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
+        userService: UserService, cryptoService: CryptoService,
+        storageService: StorageService, vaultTimeoutService: VaultTimeoutService,
+        environmentService: EnvironmentService, private routerService: RouterService,
+        stateService: StateService) {
+        super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
+            storageService, vaultTimeoutService, environmentService, stateService);
+    }
+
+    async ngOnInit() {
+        await super.ngOnInit();
+        const authed = await this.userService.isAuthenticated();
+        if (!authed) {
+            this.router.navigate(['/']);
+        } else if (await this.cryptoService.hasKey()) {
+            this.router.navigate(['vault']);
+        }
+
+        this.onSuccessfulSubmit = () => {
+            const previousUrl = this.routerService.getPreviousUrl();
+            if (previousUrl !== '/' && previousUrl.indexOf('lock') === -1) {
+                this.successRoute = previousUrl;
+            }
+            this.router.navigate([this.successRoute]);
+        };
+    }
+}

src/app/accounts/login.component.html

@@ -0,0 +1,51 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <img src="../../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden">
+            <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
+            <div class="card d-block">
+                <div class="card-body">
+                    <div class="form-group">
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            inputmode="email" appInputVerbatim="false">
+                    </div>
+                    <div class="form-group">
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
+                                required appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                (click)="togglePassword()">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </button>
+                        </div>
+                        <small class="form-text">
+                            <a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
+                        </small>
+                    </div>
+                    <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="rememberEmail" name="RememberEmail"
+                            [(ngModel)]="rememberEmail">
+                        <label class="form-check-label" for="rememberEmail">{{'rememberEmail' | i18n}}</label>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <span>
+                                <i class="fa fa-sign-in" aria-hidden="true"></i> {{'logIn' | i18n}}
+                            </span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                        <a routerLink="/register" [queryParams]="{email: email}"
+                            class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i> {{'createAccount' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/accounts/login.component.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { AuthService } from 'jslib/abstractions/auth.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+
+import { LoginComponent as BaseLoginComponent } from 'jslib/angular/components/login.component';
+
+@Component({
+    selector: 'app-login',
+    templateUrl: 'login.component.html',
+})
+export class LoginComponent extends BaseLoginComponent {
+    constructor(authService: AuthService, router: Router,
+        i18nService: I18nService, private route: ActivatedRoute,
+        storageService: StorageService, stateService: StateService,
+        platformUtilsService: PlatformUtilsService) {
+        super(authService, router, platformUtilsService, i18nService, storageService, stateService);
+        this.onSuccessfulLoginNavigate = this.goAfterLogIn;
+    }
+
+    async ngOnInit() {
+        const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
+            if (qParams.email != null && qParams.email.indexOf('@') > -1) {
+                this.email = qParams.email;
+            }
+            if (qParams.premium != null) {
+                this.stateService.save('loginRedirect', { route: '/settings/premium' });
+            } else if (qParams.org != null) {
+                this.stateService.save('loginRedirect',
+                    { route: '/settings/create-organization', qParams: { plan: qParams.org } });
+            }
+            await super.ngOnInit();
+            if (queryParamsSub != null) {
+                queryParamsSub.unsubscribe();
+            }
+        });
+    }
+
+    async goAfterLogIn() {
+        const invite = await this.stateService.get<any>('orgInvitation');
+        if (invite != null) {
+            this.router.navigate(['accept-organization'], { queryParams: invite });
+        } else {
+            const loginRedirect = await this.stateService.get<any>('loginRedirect');
+            if (loginRedirect != null) {
+                this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
+                await this.stateService.remove('loginRedirect');
+            } else {
+                this.router.navigate([this.successRoute]);
+            }
+        }
+    }
+}

src/app/accounts/recover-delete.component.html

@@ -0,0 +1,27 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'deleteAccount' | i18n}}</p>
+            <div class="card">
+                <div class="card-body">
+                    <p>{{'deleteRecoverDesc' | i18n}}</p>
+                    <div class="form-group">
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            appAutofocus inputmode="email" appInputVerbatim="false">
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <span>{{'submit' | i18n}}</span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/accounts/recover-delete.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { DeleteRecoverRequest } from 'jslib/models/request/deleteRecoverRequest';
+
+@Component({
+    selector: 'app-recover-delete',
+    templateUrl: 'recover-delete.component.html',
+})
+export class RecoverDeleteComponent {
+    email: string;
+    formPromise: Promise<any>;
+
+    constructor(private router: Router, private apiService: ApiService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService) {
+    }
+
+    async submit() {
+        try {
+            const request = new DeleteRecoverRequest();
+            request.email = this.email.trim().toLowerCase();
+            this.formPromise = this.apiService.postAccountRecoverDelete(request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Started Delete Recovery' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('deleteRecoverEmailSent'));
+            this.router.navigate(['/']);
+        } catch { }
+    }
+}

src/app/accounts/recover-two-factor.component.html

@@ -0,0 +1,40 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'recoverAccountTwoStep' | i18n}}</p>
+            <div class="card">
+                <div class="card-body">
+                    <p>{{'recoverAccountTwoStepDesc' | i18n}}
+                        <a href="https://help.bitwarden.com/article/lost-two-step-device/" target="_blank"
+                            rel="noopener">{{'learnMore' | i18n}}</a>
+                    </p>
+                    <div class="form-group">
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            appAutofocus inputmode="email" appInputVerbatim="false">
+                    </div>
+                    <div class="form-group">
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <input id="masterPassword" type="password" name="MasterPassword" class="form-control"
+                            [(ngModel)]="masterPassword" required appInputVerbatim>
+                    </div>
+                    <div class="form-group">
+                        <label for="recoveryCode">{{'recoveryCodeTitle' | i18n}}</label>
+                        <input id="recoveryCode" class="text-monospace form-control" type="text" name="RecoveryCode"
+                            [(ngModel)]="recoveryCode" required appInputVerbatim>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <span>{{'submit' | i18n}}</span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/accounts/recover-two-factor.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { AuthService } from 'jslib/abstractions/auth.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { TwoFactorRecoveryRequest } from 'jslib/models/request/twoFactorRecoveryRequest';
+
+@Component({
+    selector: 'app-recover-two-factor',
+    templateUrl: 'recover-two-factor.component.html',
+})
+export class RecoverTwoFactorComponent {
+    email: string;
+    masterPassword: string;
+    recoveryCode: string;
+    formPromise: Promise<any>;
+
+    constructor(private router: Router, private apiService: ApiService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService, private cryptoService: CryptoService,
+        private authService: AuthService) { }
+
+    async submit() {
+        try {
+            const request = new TwoFactorRecoveryRequest();
+            request.recoveryCode = this.recoveryCode.replace(/\s/g, '').toLowerCase();
+            request.email = this.email.trim().toLowerCase();
+            const key = await this.authService.makePreloginKey(this.masterPassword, request.email);
+            request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, key);
+            this.formPromise = this.apiService.postTwoFactorRecover(request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Recovered 2FA' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepRecoverDisabled'));
+            this.router.navigate(['/']);
+        } catch { }
+    }
+}

src/app/accounts/register.component.html

@@ -0,0 +1,103 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'createAccount' | i18n}}</p>
+            <div class="card d-block">
+                <div class="card-body">
+                    <app-callout title="{{'createOrganizationStep1' | i18n}}" type="info" icon="fa-thumb-tack"
+                        *ngIf="showCreateOrgMessage">
+                        {{'createOrganizationCreatePersonalAccount' | i18n}}
+                    </app-callout>
+                    <div class="form-group">
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            [appAutofocus]="email === ''" inputmode="email" appInputVerbatim="false">
+                        <small class="form-text text-muted">{{'emailAddressDesc' | i18n}}</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="name">{{'yourName' | i18n}}</label>
+                        <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name"
+                            [appAutofocus]="email !== ''">
+                        <small class="form-text text-muted">{{'yourNameDesc' | i18n}}</small>
+                    </div>
+                    <div class="form-group">
+                        <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                            {{'masterPasswordPolicyInEffect' | i18n}}
+                            <ul class="mb-0">
+                                <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                                    {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                                    {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                                    {{'policyInEffectUppercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireLower">
+                                    {{'policyInEffectLowercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                                    {{'policyInEffectNumbers' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                                    {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+                            </ul>
+                        </app-callout>
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <div class="w-100">
+                                <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                    name="MasterPassword" class="text-monospace form-control mb-1"
+                                    [(ngModel)]="masterPassword" (input)="updatePasswordStrength()" required
+                                    appInputVerbatim>
+                                <app-password-strength [score]="masterPasswordScore" [showText]="true">
+                                </app-password-strength>
+                            </div>
+                            <div>
+                                <button type="button" class="ml-1 btn btn-link"
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                    <i class="fa fa-lg" aria-hidden="true"
+                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                </button>
+                                <div class="progress-bar invisible"></div>
+                            </div>
+                        </div>
+                        <small class="form-text text-muted">{{'masterPassDesc' | i18n}}</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPasswordRetype" class="text-monospace form-control"
+                                [(ngModel)]="confirmMasterPassword" required appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                (click)="togglePassword(true)">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="hint">{{'masterPassHint' | i18n}}</label>
+                        <input id="hint" class="form-control" type="text" name="Hint" [(ngModel)]="hint">
+                        <small class="form-text text-muted">{{'masterPassHintDesc' | i18n}}</small>
+                    </div>
+                    <hr>
+                    <div class="d-flex mb-2">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <span>{{'submit' | i18n}}</span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
+                    <small class="text-muted" *ngIf="showTerms">
+                        {{'submitAgreePolicies' | i18n}}
+                        <a href="https://bitwarden.com/terms/" target="_blank"
+                            rel="noopener">{{'termsOfService' | i18n}}</a>,
+                        <a href="https://bitwarden.com/privacy/" target="_blank"
+                            rel="noopener">{{'privacyPolicy' | i18n}}</a>
+                    </small>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/accounts/register.component.ts

@@ -0,0 +1,108 @@
+import { Component } from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { AuthService } from 'jslib/abstractions/auth.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib/abstractions/policy.service';
+import { StateService } from 'jslib/abstractions/state.service';
+
+import { RegisterComponent as BaseRegisterComponent } from 'jslib/angular/components/register.component';
+
+import { MasterPasswordPolicyOptions } from 'jslib/models/domain/masterPasswordPolicyOptions';
+import { Policy } from 'jslib/models/domain/policy';
+
+import { PolicyData } from 'jslib/models/data/policyData';
+
+@Component({
+    selector: 'app-register',
+    templateUrl: 'register.component.html',
+})
+export class RegisterComponent extends BaseRegisterComponent {
+    showCreateOrgMessage = false;
+    showTerms = true;
+    enforcedPolicyOptions: MasterPasswordPolicyOptions;
+
+    private policies: Policy[];
+
+    constructor(authService: AuthService, router: Router,
+        i18nService: I18nService, cryptoService: CryptoService,
+        apiService: ApiService, private route: ActivatedRoute,
+        stateService: StateService, platformUtilsService: PlatformUtilsService,
+        passwordGenerationService: PasswordGenerationService, private policyService: PolicyService) {
+        super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
+            passwordGenerationService);
+        this.showTerms = !platformUtilsService.isSelfHost();
+    }
+
+    getPasswordScoreAlertDisplay() {
+        if (this.enforcedPolicyOptions == null) {
+            return '';
+        }
+
+        let str: string;
+        switch (this.enforcedPolicyOptions.minComplexity) {
+            case 4:
+                str = this.i18nService.t('strong');
+                break;
+            case 3:
+                str = this.i18nService.t('good');
+                break;
+            default:
+                str = this.i18nService.t('weak');
+                break;
+        }
+        return str + ' (' + this.enforcedPolicyOptions.minComplexity + ')';
+    }
+
+    async ngOnInit() {
+        const queryParamsSub = this.route.queryParams.subscribe((qParams) => {
+            if (qParams.email != null && qParams.email.indexOf('@') > -1) {
+                this.email = qParams.email;
+            }
+            if (qParams.premium != null) {
+                this.stateService.save('loginRedirect', { route: '/settings/premium' });
+            } else if (qParams.org != null) {
+                this.showCreateOrgMessage = true;
+                this.stateService.save('loginRedirect',
+                    { route: '/settings/create-organization', qParams: { plan: qParams.org } });
+            }
+            if (queryParamsSub != null) {
+                queryParamsSub.unsubscribe();
+            }
+        });
+        const invite = await this.stateService.get<any>('orgInvitation');
+        if (invite != null) {
+            try {
+                const policies = await this.apiService.getPoliciesByToken(invite.organizationId, invite.token,
+                    invite.email, invite.organizationUserId);
+                if (policies.data != null) {
+                    const policiesData = policies.data.map((p) => new PolicyData(p));
+                    this.policies = policiesData.map((p) => new Policy(p));
+                }
+            } catch { }
+        }
+
+        if (this.policies != null) {
+            this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions(this.policies);
+        }
+    }
+
+    async submit() {
+        if (this.enforcedPolicyOptions != null &&
+            !this.policyService.evaluateMasterPassword(this.masterPasswordScore, this.masterPassword,
+                this.enforcedPolicyOptions)) {
+            this.platformUtilsService.showToast('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPasswordPolicyRequirementsNotMet'));
+            return;
+        }
+
+        await super.submit();
+    }
+}

src/app/accounts/two-factor-options.component.html

@@ -0,0 +1,27 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="list-group list-group-flush">
+                <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
+                    class="list-group-item list-group-item-action">
+                    <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
+                    <h3>{{p.name}}</h3>
+                    {{p.description}}
+                </a>
+                <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
+                    <h3>{{'recoveryCodeTitle' | i18n}}</h3>
+                    {{'recoveryCodeDesc' | i18n}}
+                </a>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/accounts/two-factor-options.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthService } from 'jslib/abstractions/auth.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import {
+    TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent,
+} from 'jslib/angular/components/two-factor-options.component';
+
+@Component({
+    selector: 'app-two-factor-options',
+    templateUrl: 'two-factor-options.component.html',
+})
+export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
+    constructor(authService: AuthService, router: Router,
+        i18nService: I18nService, platformUtilsService: PlatformUtilsService) {
+        super(authService, router, i18nService, platformUtilsService, window);
+    }
+}

src/app/accounts/two-factor.component.html

@@ -0,0 +1,87 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate autocomplete="off">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5"
+            [ngClass]="{'col-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
+            <p class="lead text-center mb-4">{{title}}</p>
+            <div class="card d-block">
+                <div class="card-body">
+                    <ng-container
+                        *ngIf="selectedProviderType === providerType.Email || selectedProviderType === providerType.Authenticator">
+                        <p *ngIf="selectedProviderType === providerType.Authenticator">
+                            {{'enterVerificationCodeApp' | i18n}}</p>
+                        <p *ngIf="selectedProviderType === providerType.Email">
+                            {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
+                        </p>
+                        <div class="form-group">
+                            <label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
+                            <input id="code" type="text" name="Code" class="form-control" [(ngModel)]="token" required
+                                appAutofocus inputmode="tel" appInputVerbatim>
+                            <small class="form-text" *ngIf="selectedProviderType === providerType.Email">
+                                <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise"
+                                    *ngIf="selectedProviderType === providerType.Email">
+                                    {{'sendVerificationCodeEmailAgain' | i18n}}
+                                </a>
+                            </small>
+                        </div>
+                    </ng-container>
+                    <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
+                        <p class="text-center">{{'insertYubiKey' | i18n}}</p>
+                        <img src="../../images/yubikey.jpg" class="rounded img-fluid mb-3" alt="">
+                        <div class="form-group">
+                            <label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
+                            <input id="code" type="password" name="Code" class="form-control" [(ngModel)]="token"
+                                required appAutofocus appInputVerbatim autocomplete="new-password">
+                        </div>
+                    </ng-container>
+                    <ng-container *ngIf="selectedProviderType === providerType.U2f">
+                        <p class="text-center" *ngIf="!u2fReady">
+                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'loading' | i18n}}</span>
+                        </p>
+                        <ng-container *ngIf="u2fReady">
+                            <p class="text-center">{{'insertU2f' | i18n}}</p>
+                            <img src="../../images/u2fkey.jpg" alt="" class="rounded img-fluid mb-3">
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="selectedProviderType === providerType.Duo ||
+                        selectedProviderType === providerType.OrganizationDuo">
+                        <div id="duo-frame" class="mb-3">
+                            <iframe id="duo_iframe"></iframe>
+                        </div>
+                    </ng-container>
+                    <i class="fa fa-spinner text-muted fa-spin pull-right" title="{{'loading' | i18n}}"
+                        *ngIf="form.loading && selectedProviderType === providerType.U2f" aria-hidden="true"></i>
+                    <div class="form-check" *ngIf="selectedProviderType != null">
+                        <input id="remember" type="checkbox" name="Remember" class="form-check-input"
+                            [(ngModel)]="remember">
+                        <label for="remember" class="form-check-label">{{'rememberMe' | i18n}}</label>
+                    </div>
+                    <ng-container *ngIf="selectedProviderType == null">
+                        <p>{{'noTwoStepProviders' | i18n}}</p>
+                        <p>{{'noTwoStepProviders2' | i18n}}</p>
+                    </ng-container>
+                    <hr>
+                    <div class="d-flex mb-3">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading"
+                            *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo && 
+                        selectedProviderType !== providerType.OrganizationDuo && selectedProviderType !== providerType.U2f">
+                            <span>
+                                <i class="fa fa-sign-in" aria-hidden="true"></i> {{'continue' | i18n}}
+                            </span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
+                    <div class="text-center">
+                        <a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
+<ng-template #twoFactorOptions></ng-template>
+<iframe id="u2f_iframe" hidden></iframe>

src/app/accounts/two-factor.component.ts

@@ -0,0 +1,73 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+
+import { Router } from '@angular/router';
+
+import { TwoFactorOptionsComponent } from './two-factor-options.component';
+
+import { ModalComponent } from '../modal.component';
+
+import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { AuthService } from 'jslib/abstractions/auth.service';
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+
+import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/components/two-factor.component';
+
+@Component({
+    selector: 'app-two-factor',
+    templateUrl: 'two-factor.component.html',
+})
+export class TwoFactorComponent extends BaseTwoFactorComponent {
+    @ViewChild('twoFactorOptions', { read: ViewContainerRef }) twoFactorOptionsModal: ViewContainerRef;
+
+    constructor(authService: AuthService, router: Router,
+        i18nService: I18nService, apiService: ApiService,
+        platformUtilsService: PlatformUtilsService, stateService: StateService,
+        environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver,
+        storageService: StorageService) {
+        super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
+            stateService, storageService);
+        this.onSuccessfulLoginNavigate = this.goAfterLogIn;
+    }
+
+    anotherMethod() {
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const modal = this.twoFactorOptionsModal.createComponent(factory).instance;
+        const childComponent = modal.show<TwoFactorOptionsComponent>(TwoFactorOptionsComponent,
+            this.twoFactorOptionsModal);
+
+        childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
+            modal.close();
+            this.selectedProviderType = provider;
+            await this.init();
+        });
+        childComponent.onRecoverSelected.subscribe(() => {
+            modal.close();
+        });
+    }
+
+    async goAfterLogIn() {
+        const invite = await this.stateService.get<any>('orgInvitation');
+        if (invite != null) {
+            this.router.navigate(['accept-organization'], { queryParams: invite });
+        } else {
+            const loginRedirect = await this.stateService.get<any>('loginRedirect');
+            if (loginRedirect != null) {
+                this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
+                await this.stateService.remove('loginRedirect');
+            } else {
+                this.router.navigate([this.successRoute]);
+            }
+        }
+    }
+}

src/app/accounts/verify-email-token.component.html

@@ -0,0 +1,9 @@
+<div class="mt-5 d-flex justify-content-center">
+    <div>
+        <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
+        <p class="text-center">
+            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
+        </p>
+    </div>
+</div>

src/app/accounts/verify-email-token.component.ts

@@ -0,0 +1,51 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { VerifyEmailRequest } from 'jslib/models/request/verifyEmailRequest';
+
+@Component({
+    selector: 'app-verify-email-token',
+    templateUrl: 'verify-email-token.component.html',
+})
+export class VerifyEmailTokenComponent implements OnInit {
+    constructor(private router: Router, private toasterService: ToasterService,
+        private i18nService: I18nService, private route: ActivatedRoute,
+        private apiService: ApiService, private userService: UserService) { }
+
+    ngOnInit() {
+        let fired = false;
+        this.route.queryParams.subscribe(async (qParams) => {
+            if (fired) {
+                return;
+            }
+            fired = true;
+            if (qParams.userId != null && qParams.token != null) {
+                try {
+                    await this.apiService.postAccountVerifyEmailToken(
+                        new VerifyEmailRequest(qParams.userId, qParams.token));
+                    const authed = await this.userService.isAuthenticated();
+                    if (authed) {
+                        await this.apiService.refreshIdentityToken();
+                    }
+                    this.toasterService.popAsync('success', null, this.i18nService.t('emailVerified'));
+                    this.router.navigate(['/']);
+                    return;
+                } catch { }
+            }
+            this.toasterService.popAsync('error', null, this.i18nService.t('emailVerifiedFailed'));
+            this.router.navigate(['/']);
+        });
+    }
+}

src/app/accounts/verify-recover-delete.component.html

@@ -0,0 +1,26 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'deleteAccount' | i18n}}</p>
+            <div class="card">
+                <div class="card-body">
+                    <app-callout type="warning">{{'deleteAccountWarning' | i18n}}</app-callout>
+                    <p class="text-center">
+                        <strong>{{email}}</strong>
+                    </p>
+                    <p>{{'deleteRecoverConfirmDesc' | i18n}}</p>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-danger btn-block btn-submit" [disabled]="form.loading">
+                            <span>{{'deleteAccount' | i18n}}</span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/accounts/verify-recover-delete.component.ts

@@ -0,0 +1,62 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { VerifyDeleteRecoverRequest } from 'jslib/models/request/verifyDeleteRecoverRequest';
+
+@Component({
+    selector: 'app-verify-recover-delete',
+    templateUrl: 'verify-recover-delete.component.html',
+})
+export class VerifyRecoverDeleteComponent implements OnInit {
+    email: string;
+    formPromise: Promise<any>;
+
+    private userId: string;
+    private token: string;
+
+    constructor(private router: Router, private apiService: ApiService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService, private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        let fired = false;
+        this.route.queryParams.subscribe(async (qParams) => {
+            if (fired) {
+                return;
+            }
+            fired = true;
+            if (qParams.userId != null && qParams.token != null && qParams.email != null) {
+                this.userId = qParams.userId;
+                this.token = qParams.token;
+                this.email = qParams.email;
+            } else {
+                this.router.navigate(['/']);
+            }
+        });
+    }
+
+    async submit() {
+        try {
+            const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
+            this.formPromise = this.apiService.postAccountRecoverDeleteToken(request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Recovered Delete' });
+            this.toasterService.popAsync('success', this.i18nService.t('accountDeleted'),
+                this.i18nService.t('accountDeletedDesc'));
+            this.router.navigate(['/']);
+        } catch { }
+    }
+}

src/app/app-routing.module.ts

@@ -0,0 +1,304 @@
+import { NgModule } from '@angular/core';
+import {
+    RouterModule,
+    Routes,
+} from '@angular/router';
+
+import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
+import { OrganizationLayoutComponent } from './layouts/organization-layout.component';
+import { UserLayoutComponent } from './layouts/user-layout.component';
+
+import { AcceptOrganizationComponent } from './accounts/accept-organization.component';
+import { HintComponent } from './accounts/hint.component';
+import { LockComponent } from './accounts/lock.component';
+import { LoginComponent } from './accounts/login.component';
+import { RecoverDeleteComponent } from './accounts/recover-delete.component';
+import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
+import { RegisterComponent } from './accounts/register.component';
+import { TwoFactorComponent } from './accounts/two-factor.component';
+import { VerifyEmailTokenComponent } from './accounts/verify-email-token.component';
+import { VerifyRecoverDeleteComponent } from './accounts/verify-recover-delete.component';
+
+import { CollectionsComponent as OrgManageCollectionsComponent } from './organizations/manage/collections.component';
+import { EventsComponent as OrgEventsComponent } from './organizations/manage/events.component';
+import { GroupsComponent as OrgGroupsComponent } from './organizations/manage/groups.component';
+import { ManageComponent as OrgManageComponent } from './organizations/manage/manage.component';
+import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/people.component';
+import { PoliciesComponent as OrgPoliciesComponent } from './organizations/manage/policies.component';
+
+import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
+import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
+import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
+import { SettingsComponent as OrgSettingsComponent } from './organizations/settings/settings.component';
+import {
+    TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
+} from './organizations/settings/two-factor-setup.component';
+
+import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
+import {
+    ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent,
+} from './organizations/tools/exposed-passwords-report.component';
+import { ImportComponent as OrgImportComponent } from './organizations/tools/import.component';
+import {
+    InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent,
+} from './organizations/tools/inactive-two-factor-report.component';
+import {
+    ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent,
+} from './organizations/tools/reused-passwords-report.component';
+import { ToolsComponent as OrgToolsComponent } from './organizations/tools/tools.component';
+import {
+    UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent,
+} from './organizations/tools/unsecured-websites-report.component';
+import {
+    WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent,
+} from './organizations/tools/weak-passwords-report.component';
+
+import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault.component';
+
+import { AccountComponent } from './settings/account.component';
+import { CreateOrganizationComponent } from './settings/create-organization.component';
+import { DomainRulesComponent } from './settings/domain-rules.component';
+import { OptionsComponent } from './settings/options.component';
+import { OrganizationsComponent } from './settings/organizations.component';
+import { PremiumComponent } from './settings/premium.component';
+import { SettingsComponent } from './settings/settings.component';
+import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
+import { UserBillingComponent } from './settings/user-billing.component';
+import { UserSubscriptionComponent } from './settings/user-subscription.component';
+
+import { BreachReportComponent } from './tools/breach-report.component';
+import { ExportComponent } from './tools/export.component';
+import { ExposedPasswordsReportComponent } from './tools/exposed-passwords-report.component';
+import { ImportComponent } from './tools/import.component';
+import { InactiveTwoFactorReportComponent } from './tools/inactive-two-factor-report.component';
+import { PasswordGeneratorComponent } from './tools/password-generator.component';
+import { ReusedPasswordsReportComponent } from './tools/reused-passwords-report.component';
+import { ToolsComponent } from './tools/tools.component';
+import { UnsecuredWebsitesReportComponent } from './tools/unsecured-websites-report.component';
+import { WeakPasswordsReportComponent } from './tools/weak-passwords-report.component';
+
+import { VaultComponent } from './vault/vault.component';
+
+import { OrganizationGuardService } from './services/organization-guard.service';
+import { OrganizationTypeGuardService } from './services/organization-type-guard.service';
+import { UnauthGuardService } from './services/unauth-guard.service';
+
+import { AuthGuardService } from 'jslib/angular/services/auth-guard.service';
+
+import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: FrontendLayoutComponent,
+        children: [
+            { path: '', pathMatch: 'full', component: LoginComponent, canActivate: [UnauthGuardService] },
+            { path: '2fa', component: TwoFactorComponent, canActivate: [UnauthGuardService] },
+            {
+                path: 'register', component: RegisterComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'createAccount' },
+            },
+            {
+                path: 'hint', component: HintComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'passwordHint' },
+            },
+            { path: 'lock', component: LockComponent },
+            { path: 'verify-email', component: VerifyEmailTokenComponent },
+            {
+                path: 'accept-organization',
+                component: AcceptOrganizationComponent,
+                data: { titleId: 'joinOrganization' },
+            },
+            { path: 'recover', pathMatch: 'full', redirectTo: 'recover-2fa' },
+            {
+                path: 'recover-2fa',
+                component: RecoverTwoFactorComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'recoverAccountTwoStep' },
+            },
+            {
+                path: 'recover-delete',
+                component: RecoverDeleteComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'deleteAccount' },
+            },
+            {
+                path: 'verify-recover-delete',
+                component: VerifyRecoverDeleteComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'deleteAccount' },
+            },
+        ],
+    },
+    {
+        path: '',
+        component: UserLayoutComponent,
+        canActivate: [AuthGuardService],
+        children: [
+            { path: 'vault', component: VaultComponent, data: { titleId: 'myVault' } },
+            {
+                path: 'settings',
+                component: SettingsComponent,
+                children: [
+                    { path: '', pathMatch: 'full', redirectTo: 'account' },
+                    { path: 'account', component: AccountComponent, data: { titleId: 'myAccount' } },
+                    { path: 'options', component: OptionsComponent, data: { titleId: 'options' } },
+                    { path: 'domain-rules', component: DomainRulesComponent, data: { titleId: 'domainRules' } },
+                    { path: 'two-factor', component: TwoFactorSetupComponent, data: { titleId: 'twoStepLogin' } },
+                    { path: 'premium', component: PremiumComponent, data: { titleId: 'goPremium' } },
+                    { path: 'billing', component: UserBillingComponent, data: { titleId: 'billing' } },
+                    {
+                        path: 'subscription',
+                        component: UserSubscriptionComponent,
+                        data: { titleId: 'premiumMembership' },
+                    },
+                    { path: 'organizations', component: OrganizationsComponent, data: { titleId: 'organizations' } },
+                    {
+                        path: 'create-organization',
+                        component: CreateOrganizationComponent,
+                        data: { titleId: 'newOrganization' },
+                    },
+                ],
+            },
+            {
+                path: 'tools',
+                component: ToolsComponent,
+                canActivate: [AuthGuardService],
+                children: [
+                    { path: '', pathMatch: 'full', redirectTo: 'generator' },
+                    { path: 'import', component: ImportComponent, data: { titleId: 'importData' } },
+                    { path: 'export', component: ExportComponent, data: { titleId: 'exportVault' } },
+                    {
+                        path: 'generator',
+                        component: PasswordGeneratorComponent,
+                        data: { titleId: 'passwordGenerator' },
+                    },
+                    { path: 'breach-report', component: BreachReportComponent, data: { titleId: 'dataBreachReport' } },
+                    {
+                        path: 'reused-passwords-report',
+                        component: ReusedPasswordsReportComponent,
+                        data: { titleId: 'reusedPasswordsReport' },
+                    },
+                    {
+                        path: 'unsecured-websites-report',
+                        component: UnsecuredWebsitesReportComponent,
+                        data: { titleId: 'unsecuredWebsitesReport' },
+                    },
+                    {
+                        path: 'weak-passwords-report',
+                        component: WeakPasswordsReportComponent,
+                        data: { titleId: 'weakPasswordsReport' },
+                    },
+                    {
+                        path: 'exposed-passwords-report',
+                        component: ExposedPasswordsReportComponent,
+                        data: { titleId: 'exposedPasswordsReport' },
+                    },
+                    {
+                        path: 'inactive-two-factor-report',
+                        component: InactiveTwoFactorReportComponent,
+                        data: { titleId: 'inactive2faReport' },
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        path: 'organizations/:organizationId',
+        component: OrganizationLayoutComponent,
+        canActivate: [AuthGuardService, OrganizationGuardService],
+        children: [
+            { path: '', pathMatch: 'full', redirectTo: 'vault' },
+            { path: 'vault', component: OrgVaultComponent, data: { titleId: 'vault' } },
+            {
+                path: 'tools',
+                component: OrgToolsComponent,
+                canActivate: [OrganizationTypeGuardService],
+                data: { allowedTypes: [OrganizationUserType.Owner, OrganizationUserType.Admin] },
+                children: [
+                    { path: '', pathMatch: 'full', redirectTo: 'import' },
+                    { path: 'import', component: OrgImportComponent, data: { titleId: 'importData' } },
+                    { path: 'export', component: OrgExportComponent, data: { titleId: 'exportVault' } },
+                    {
+                        path: 'exposed-passwords-report',
+                        component: OrgExposedPasswordsReportComponent,
+                        data: { titleId: 'exposedPasswordsReport' },
+                    },
+                    {
+                        path: 'inactive-two-factor-report',
+                        component: OrgInactiveTwoFactorReportComponent,
+                        data: { titleId: 'inactive2faReport' },
+                    },
+                    {
+                        path: 'reused-passwords-report',
+                        component: OrgReusedPasswordsReportComponent,
+                        data: { titleId: 'reusedPasswordsReport' },
+                    },
+                    {
+                        path: 'unsecured-websites-report',
+                        component: OrgUnsecuredWebsitesReportComponent,
+                        data: { titleId: 'unsecuredWebsitesReport' },
+                    },
+                    {
+                        path: 'weak-passwords-report',
+                        component: OrgWeakPasswordsReportComponent,
+                        data: { titleId: 'weakPasswordsReport' },
+                    },
+                ],
+            },
+            {
+                path: 'manage',
+                component: OrgManageComponent,
+                canActivate: [OrganizationTypeGuardService],
+                data: {
+                    allowedTypes: [
+                        OrganizationUserType.Owner,
+                        OrganizationUserType.Admin,
+                        OrganizationUserType.Manager,
+                    ],
+                },
+                children: [
+                    { path: '', pathMatch: 'full', redirectTo: 'people' },
+                    { path: 'collections', component: OrgManageCollectionsComponent, data: { titleId: 'collections' } },
+                    { path: 'events', component: OrgEventsComponent, data: { titleId: 'eventLogs' } },
+                    { path: 'groups', component: OrgGroupsComponent, data: { titleId: 'groups' } },
+                    { path: 'people', component: OrgPeopleComponent, data: { titleId: 'people' } },
+                    { path: 'policies', component: OrgPoliciesComponent, data: { titleId: 'policies' } },
+                ],
+            },
+            {
+                path: 'settings',
+                component: OrgSettingsComponent,
+                canActivate: [OrganizationTypeGuardService],
+                data: { allowedTypes: [OrganizationUserType.Owner] },
+                children: [
+                    { path: '', pathMatch: 'full', redirectTo: 'account' },
+                    { path: 'account', component: OrgAccountComponent, data: { titleId: 'myOrganization' } },
+                    { path: 'two-factor', component: OrgTwoFactorSetupComponent, data: { titleId: 'twoStepLogin' } },
+                    {
+                        path: 'billing',
+                        component: OrganizationBillingComponent,
+                        data: { titleId: 'billing' },
+                    },
+                    {
+                        path: 'subscription',
+                        component: OrganizationSubscriptionComponent,
+                        data: { titleId: 'subscription' },
+                    },
+                ],
+            },
+        ],
+    },
+    { path: '**', redirectTo: '' },
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, {
+        useHash: true,
+        /*enableTracing: true,*/
+    })],
+    exports: [RouterModule],
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -0,0 +1,2 @@
+<toaster-container [toasterconfig]="toasterConfig" aria-live="polite"></toaster-container>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -0,0 +1,265 @@
+import * as jq from 'jquery';
+import Swal from 'sweetalert2/src/sweetalert2.js';
+
+import {
+    BodyOutputType,
+    Toast,
+    ToasterConfig,
+    ToasterContainerComponent,
+    ToasterService,
+} from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+
+import {
+    Component,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    SecurityContext,
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import {
+    NavigationEnd,
+    Router,
+} from '@angular/router';
+
+import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+
+import { StorageService } from 'jslib/abstractions/storage.service';
+
+import { AuthService } from 'jslib/abstractions/auth.service';
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CollectionService } from 'jslib/abstractions/collection.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { EventService } from 'jslib/abstractions/event.service';
+import { FolderService } from 'jslib/abstractions/folder.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { NotificationsService } from 'jslib/abstractions/notifications.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib/abstractions/policy.service';
+import { SearchService } from 'jslib/abstractions/search.service';
+import { SettingsService } from 'jslib/abstractions/settings.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { SyncService } from 'jslib/abstractions/sync.service';
+import { TokenService } from 'jslib/abstractions/token.service';
+import { UserService } from 'jslib/abstractions/user.service';
+import { VaultTimeoutService } from 'jslib/abstractions/vaultTimeout.service';
+
+import { ConstantsService } from 'jslib/services/constants.service';
+
+import { RouterService } from './services/router.service';
+
+const BroadcasterSubscriptionId = 'AppComponent';
+const IdleTimeout = 60000 * 10; // 10 minutes
+
+@Component({
+    selector: 'app-root',
+    templateUrl: 'app.component.html',
+})
+export class AppComponent implements OnDestroy, OnInit {
+    toasterConfig: ToasterConfig = new ToasterConfig({
+        showCloseButton: true,
+        mouseoverTimerStop: true,
+        animation: 'flyRight',
+        limit: 5,
+    });
+
+    private lastActivity: number = null;
+    private idleTimer: number = null;
+    private isIdle = false;
+
+    constructor(private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
+        private broadcasterService: BroadcasterService, private userService: UserService,
+        private tokenService: TokenService, private folderService: FolderService,
+        private settingsService: SettingsService, private syncService: SyncService,
+        private passwordGenerationService: PasswordGenerationService, private cipherService: CipherService,
+        private authService: AuthService, private router: Router, private analytics: Angulartics2,
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private platformUtilsService: PlatformUtilsService, private ngZone: NgZone,
+        private vaultTimeoutService: VaultTimeoutService, private storageService: StorageService,
+        private cryptoService: CryptoService, private collectionService: CollectionService,
+        private sanitizer: DomSanitizer, private searchService: SearchService,
+        private notificationsService: NotificationsService, private routerService: RouterService,
+        private stateService: StateService, private eventService: EventService,
+        private policyService: PolicyService) { }
+
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            window.onmousemove = () => this.recordActivity();
+            window.onmousedown = () => this.recordActivity();
+            window.ontouchstart = () => this.recordActivity();
+            window.onclick = () => this.recordActivity();
+            window.onscroll = () => this.recordActivity();
+            window.onkeypress = () => this.recordActivity();
+        });
+
+        this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
+            this.ngZone.run(async () => {
+                switch (message.command) {
+                    case 'loggedIn':
+                    case 'loggedOut':
+                    case 'unlocked':
+                        this.notificationsService.updateConnection(false);
+                        break;
+                    case 'authBlocked':
+                        this.router.navigate(['/']);
+                        break;
+                    case 'logout':
+                        this.logOut(!!message.expired);
+                        break;
+                    case 'lockVault':
+                        await this.vaultTimeoutService.lock();
+                        break;
+                    case 'locked':
+                        this.notificationsService.updateConnection(false);
+                        this.router.navigate(['lock']);
+                        break;
+                    case 'lockedUrl':
+                        window.setTimeout(() => this.routerService.setPreviousUrl(message.url), 500);
+                        break;
+                    case 'syncStarted':
+                        break;
+                    case 'syncCompleted':
+                        break;
+                    case 'upgradeOrganization':
+                        const upgradeConfirmed = await this.platformUtilsService.showDialog(
+                            this.i18nService.t('upgradeOrganizationDesc'), this.i18nService.t('upgradeOrganization'),
+                            this.i18nService.t('upgradeOrganization'), this.i18nService.t('cancel'));
+                        if (upgradeConfirmed) {
+                            this.router.navigate(['organizations', message.organizationId, 'settings', 'billing']);
+                        }
+                        break;
+                    case 'premiumRequired':
+                        const premiumConfirmed = await this.platformUtilsService.showDialog(
+                            this.i18nService.t('premiumRequiredDesc'), this.i18nService.t('premiumRequired'),
+                            this.i18nService.t('learnMore'), this.i18nService.t('cancel'));
+                        if (premiumConfirmed) {
+                            this.router.navigate(['settings/premium']);
+                        }
+                        break;
+                    case 'showToast':
+                        this.showToast(message);
+                        break;
+                    case 'analyticsEventTrack':
+                        this.analytics.eventTrack.next({
+                            action: message.action,
+                            properties: { label: message.label },
+                        });
+                        break;
+                    default:
+                        break;
+                }
+            });
+        });
+
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                const modals = Array.from(document.querySelectorAll('.modal'));
+                for (const modal of modals) {
+                    (jq(modal) as any).modal('hide');
+                }
+
+                if (document.querySelector('.swal-modal') != null) {
+                    Swal.close(undefined);
+                }
+            }
+        });
+    }
+
+    ngOnDestroy() {
+        this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+    }
+
+    private async logOut(expired: boolean) {
+        await this.eventService.uploadEvents();
+        const userId = await this.userService.getUserId();
+
+        await Promise.all([
+            this.eventService.clearEvents(),
+            this.syncService.setLastSync(new Date(0)),
+            this.tokenService.clearToken(),
+            this.cryptoService.clearKeys(),
+            this.userService.clear(),
+            this.settingsService.clear(userId),
+            this.cipherService.clear(userId),
+            this.folderService.clear(userId),
+            this.collectionService.clear(userId),
+            this.policyService.clear(userId),
+            this.passwordGenerationService.clear(),
+            this.stateService.purge(),
+        ]);
+
+        this.searchService.clearIndex();
+        this.authService.logOut(async () => {
+            this.analytics.eventTrack.next({ action: 'Logged Out' });
+            if (expired) {
+                this.toasterService.popAsync('warning', this.i18nService.t('loggedOut'),
+                    this.i18nService.t('loginExpired'));
+            }
+            this.router.navigate(['/']);
+        });
+    }
+
+    private async recordActivity() {
+        const now = (new Date()).getTime();
+        if (this.lastActivity != null && now - this.lastActivity < 250) {
+            return;
+        }
+
+        this.lastActivity = now;
+        this.storageService.save(ConstantsService.lastActiveKey, now);
+
+        // Idle states
+        if (this.isIdle) {
+            this.isIdle = false;
+            this.idleStateChanged();
+        }
+        if (this.idleTimer != null) {
+            window.clearTimeout(this.idleTimer);
+            this.idleTimer = null;
+        }
+        this.idleTimer = window.setTimeout(() => {
+            if (!this.isIdle) {
+                this.isIdle = true;
+                this.idleStateChanged();
+            }
+        }, IdleTimeout);
+    }
+
+    private showToast(msg: any) {
+        const toast: Toast = {
+            type: msg.type,
+            title: msg.title,
+        };
+        if (typeof (msg.text) === 'string') {
+            toast.body = msg.text;
+        } else if (msg.text.length === 1) {
+            toast.body = msg.text[0];
+        } else {
+            let message = '';
+            msg.text.forEach((t: string) =>
+                message += ('<p>' + this.sanitizer.sanitize(SecurityContext.HTML, t) + '</p>'));
+            toast.body = message;
+            toast.bodyOutputType = BodyOutputType.TrustedHtml;
+        }
+        if (msg.options != null) {
+            if (msg.options.trustedHtml === true) {
+                toast.bodyOutputType = BodyOutputType.TrustedHtml;
+            }
+            if (msg.options.timeout != null && msg.options.timeout > 0) {
+                toast.timeout = msg.options.timeout;
+            }
+        }
+        this.toasterService.popAsync(toast);
+    }
+
+    private idleStateChanged() {
+        if (this.isIdle) {
+            this.notificationsService.disconnectFromInactivity();
+        } else {
+            this.notificationsService.reconnectFromActivity();
+        }
+    }
+}

src/app/app.module.ts

@@ -0,0 +1,416 @@
+import 'core-js';
+
+import { ToasterModule } from 'angular2-toaster';
+import { Angulartics2Module } from 'angulartics2';
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+
+import { AppRoutingModule } from './app-routing.module';
+
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ServicesModule } from './services/services.module';
+
+import { AppComponent } from './app.component';
+import { ModalComponent } from './modal.component';
+
+import { AvatarComponent } from './components/avatar.component';
+import { PasswordStrengthComponent } from './components/password-strength.component';
+
+import { FooterComponent } from './layouts/footer.component';
+import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
+import { NavbarComponent } from './layouts/navbar.component';
+import { OrganizationLayoutComponent } from './layouts/organization-layout.component';
+import { UserLayoutComponent } from './layouts/user-layout.component';
+
+import { AcceptOrganizationComponent } from './accounts/accept-organization.component';
+import { HintComponent } from './accounts/hint.component';
+import { LockComponent } from './accounts/lock.component';
+import { LoginComponent } from './accounts/login.component';
+import { RecoverDeleteComponent } from './accounts/recover-delete.component';
+import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
+import { RegisterComponent } from './accounts/register.component';
+import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
+import { TwoFactorComponent } from './accounts/two-factor.component';
+import { VerifyEmailTokenComponent } from './accounts/verify-email-token.component';
+import { VerifyRecoverDeleteComponent } from './accounts/verify-recover-delete.component';
+
+import {
+    CollectionAddEditComponent as OrgCollectionAddEditComponent,
+} from './organizations/manage/collection-add-edit.component';
+import { CollectionsComponent as OrgManageCollectionsComponent } from './organizations/manage/collections.component';
+import { EntityEventsComponent as OrgEntityEventsComponent } from './organizations/manage/entity-events.component';
+import { EntityUsersComponent as OrgEntityUsersComponent } from './organizations/manage/entity-users.component';
+import { EventsComponent as OrgEventsComponent } from './organizations/manage/events.component';
+import { GroupAddEditComponent as OrgGroupAddEditComponent } from './organizations/manage/group-add-edit.component';
+import { GroupsComponent as OrgGroupsComponent } from './organizations/manage/groups.component';
+import { ManageComponent as OrgManageComponent } from './organizations/manage/manage.component';
+import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/people.component';
+import { PoliciesComponent as OrgPoliciesComponent } from './organizations/manage/policies.component';
+import { PolicyEditComponent as OrgPolicyEditComponent } from './organizations/manage/policy-edit.component';
+import { UserAddEditComponent as OrgUserAddEditComponent } from './organizations/manage/user-add-edit.component';
+import { UserConfirmComponent as OrgUserConfirmComponent } from './organizations/manage/user-confirm.component';
+import { UserGroupsComponent as OrgUserGroupsComponent } from './organizations/manage/user-groups.component';
+
+import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
+import { AdjustSeatsComponent } from './organizations/settings/adjust-seats.component';
+import { ApiKeyComponent as OrgApiKeyComponent } from './organizations/settings/api-key.component';
+import { ChangePlanComponent } from './organizations/settings/change-plan.component';
+import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
+import { DownloadLicenseComponent } from './organizations/settings/download-license.component';
+import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
+import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
+import { RotateApiKeyComponent as OrgRotateApiKeyComponent } from './organizations/settings/rotate-api-key.component';
+import { SettingsComponent as OrgSettingComponent } from './organizations/settings/settings.component';
+import {
+    TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
+} from './organizations/settings/two-factor-setup.component';
+
+import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
+import {
+    ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent,
+} from './organizations/tools/exposed-passwords-report.component';
+import { ImportComponent as OrgImportComponent } from './organizations/tools/import.component';
+import {
+    InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent,
+} from './organizations/tools/inactive-two-factor-report.component';
+import {
+    ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent,
+} from './organizations/tools/reused-passwords-report.component';
+import { ToolsComponent as OrgToolsComponent } from './organizations/tools/tools.component';
+import {
+    UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent,
+} from './organizations/tools/unsecured-websites-report.component';
+import {
+    WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent,
+} from './organizations/tools/weak-passwords-report.component';
+
+import { AddEditComponent as OrgAddEditComponent } from './organizations/vault/add-edit.component';
+import { AttachmentsComponent as OrgAttachmentsComponent } from './organizations/vault/attachments.component';
+import { CiphersComponent as OrgCiphersComponent } from './organizations/vault/ciphers.component';
+import { CollectionsComponent as OrgCollectionsComponent } from './organizations/vault/collections.component';
+import { GroupingsComponent as OrgGroupingsComponent } from './organizations/vault/groupings.component';
+import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault.component';
+
+import { AccountComponent } from './settings/account.component';
+import { AddCreditComponent } from './settings/add-credit.component';
+import { AdjustPaymentComponent } from './settings/adjust-payment.component';
+import { AdjustStorageComponent } from './settings/adjust-storage.component';
+import { ChangeEmailComponent } from './settings/change-email.component';
+import { ChangeKdfComponent } from './settings/change-kdf.component';
+import { ChangePasswordComponent } from './settings/change-password.component';
+import { CreateOrganizationComponent } from './settings/create-organization.component';
+import { DeauthorizeSessionsComponent } from './settings/deauthorize-sessions.component';
+import { DeleteAccountComponent } from './settings/delete-account.component';
+import { DomainRulesComponent } from './settings/domain-rules.component';
+import { OptionsComponent } from './settings/options.component';
+import { OrganizationPlansComponent } from './settings/organization-plans.component';
+import { OrganizationsComponent } from './settings/organizations.component';
+import { PaymentComponent } from './settings/payment.component';
+import { PremiumComponent } from './settings/premium.component';
+import { ProfileComponent } from './settings/profile.component';
+import { PurgeVaultComponent } from './settings/purge-vault.component';
+import { SettingsComponent } from './settings/settings.component';
+import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authenticator.component';
+import { TwoFactorDuoComponent } from './settings/two-factor-duo.component';
+import { TwoFactorEmailComponent } from './settings/two-factor-email.component';
+import { TwoFactorRecoveryComponent } from './settings/two-factor-recovery.component';
+import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
+import { TwoFactorU2fComponent } from './settings/two-factor-u2f.component';
+import { TwoFactorVerifyComponent } from './settings/two-factor-verify.component';
+import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.component';
+import { UpdateKeyComponent } from './settings/update-key.component';
+import { UpdateLicenseComponent } from './settings/update-license.component';
+import { UserBillingComponent } from './settings/user-billing.component';
+import { UserSubscriptionComponent } from './settings/user-subscription.component';
+import { VerifyEmailComponent } from './settings/verify-email.component';
+
+import { BreachReportComponent } from './tools/breach-report.component';
+import { ExportComponent } from './tools/export.component';
+import { ExposedPasswordsReportComponent } from './tools/exposed-passwords-report.component';
+import { ImportComponent } from './tools/import.component';
+import { InactiveTwoFactorReportComponent } from './tools/inactive-two-factor-report.component';
+import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component';
+import { PasswordGeneratorComponent } from './tools/password-generator.component';
+import { ReusedPasswordsReportComponent } from './tools/reused-passwords-report.component';
+import { ToolsComponent } from './tools/tools.component';
+import { UnsecuredWebsitesReportComponent } from './tools/unsecured-websites-report.component';
+import { WeakPasswordsReportComponent } from './tools/weak-passwords-report.component';
+
+import { AddEditComponent } from './vault/add-edit.component';
+import { AttachmentsComponent } from './vault/attachments.component';
+import { BulkDeleteComponent } from './vault/bulk-delete.component';
+import { BulkMoveComponent } from './vault/bulk-move.component';
+import { BulkRestoreComponent } from './vault/bulk-restore.component';
+import { BulkShareComponent } from './vault/bulk-share.component';
+import { CiphersComponent } from './vault/ciphers.component';
+import { CollectionsComponent } from './vault/collections.component';
+import { FolderAddEditComponent } from './vault/folder-add-edit.component';
+import { GroupingsComponent } from './vault/groupings.component';
+import { ShareComponent } from './vault/share.component';
+import { VaultComponent } from './vault/vault.component';
+
+import { CalloutComponent } from 'jslib/angular/components/callout.component';
+import { IconComponent } from 'jslib/angular/components/icon.component';
+
+import { A11yTitleDirective } from 'jslib/angular/directives/a11y-title.directive';
+import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
+import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive';
+import { BlurClickDirective } from 'jslib/angular/directives/blur-click.directive';
+import { BoxRowDirective } from 'jslib/angular/directives/box-row.directive';
+import { FallbackSrcDirective } from 'jslib/angular/directives/fallback-src.directive';
+import { InputVerbatimDirective } from 'jslib/angular/directives/input-verbatim.directive';
+import { SelectCopyDirective } from 'jslib/angular/directives/select-copy.directive';
+import { StopClickDirective } from 'jslib/angular/directives/stop-click.directive';
+import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive';
+import { TrueFalseValueDirective } from 'jslib/angular/directives/true-false-value.directive';
+
+import { ColorPasswordPipe } from 'jslib/angular/pipes/color-password.pipe';
+import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe';
+import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
+import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
+
+import { registerLocaleData } from '@angular/common';
+import localeCa from '@angular/common/locales/ca';
+import localeCs from '@angular/common/locales/cs';
+import localeDa from '@angular/common/locales/da';
+import localeDe from '@angular/common/locales/de';
+import localeEnGb from '@angular/common/locales/en-GB';
+import localeEs from '@angular/common/locales/es';
+import localeEt from '@angular/common/locales/et';
+import localeFr from '@angular/common/locales/fr';
+import localeHe from '@angular/common/locales/he';
+import localeIt from '@angular/common/locales/it';
+import localeJa from '@angular/common/locales/ja';
+import localeKo from '@angular/common/locales/ko';
+import localeNb from '@angular/common/locales/nb';
+import localeNl from '@angular/common/locales/nl';
+import localePl from '@angular/common/locales/pl';
+import localePtBr from '@angular/common/locales/pt';
+import localePtPt from '@angular/common/locales/pt-PT';
+import localeRu from '@angular/common/locales/ru';
+import localeSk from '@angular/common/locales/sk';
+import localeSv from '@angular/common/locales/sv';
+import localeUk from '@angular/common/locales/uk';
+import localeZhCn from '@angular/common/locales/zh-Hans';
+import localeZhTw from '@angular/common/locales/zh-Hant';
+
+registerLocaleData(localeCa, 'ca');
+registerLocaleData(localeCs, 'cs');
+registerLocaleData(localeDa, 'da');
+registerLocaleData(localeDe, 'de');
+registerLocaleData(localeEnGb, 'en-GB');
+registerLocaleData(localeEs, 'es');
+registerLocaleData(localeEt, 'et');
+registerLocaleData(localeFr, 'fr');
+registerLocaleData(localeHe, 'he');
+registerLocaleData(localeIt, 'it');
+registerLocaleData(localeJa, 'ja');
+registerLocaleData(localeKo, 'ko');
+registerLocaleData(localeNb, 'nb');
+registerLocaleData(localeNl, 'nl');
+registerLocaleData(localePl, 'pl');
+registerLocaleData(localePtBr, 'pt-BR');
+registerLocaleData(localePtPt, 'pt-PT');
+registerLocaleData(localeRu, 'ru');
+registerLocaleData(localeSk, 'sk');
+registerLocaleData(localeSv, 'sv');
+registerLocaleData(localeUk, 'uk');
+registerLocaleData(localeZhCn, 'zh-CN');
+registerLocaleData(localeZhTw, 'zh-TW');
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        AppRoutingModule,
+        ServicesModule,
+        Angulartics2Module.forRoot([Angulartics2GoogleAnalytics], {
+            pageTracking: {
+                clearQueryParams: true,
+            },
+        }),
+        ToasterModule.forRoot(),
+        InfiniteScrollModule,
+        DragDropModule,
+    ],
+    declarations: [
+        A11yTitleDirective,
+        AcceptOrganizationComponent,
+        AccountComponent,
+        AddCreditComponent,
+        AddEditComponent,
+        AdjustPaymentComponent,
+        AdjustSeatsComponent,
+        AdjustStorageComponent,
+        ApiActionDirective,
+        AppComponent,
+        AttachmentsComponent,
+        AutofocusDirective,
+        AvatarComponent,
+        BlurClickDirective,
+        BoxRowDirective,
+        BreachReportComponent,
+        BulkDeleteComponent,
+        BulkMoveComponent,
+        BulkRestoreComponent,
+        BulkShareComponent,
+        CalloutComponent,
+        ChangeEmailComponent,
+        ChangeKdfComponent,
+        ChangePasswordComponent,
+        ChangePlanComponent,
+        CiphersComponent,
+        CollectionsComponent,
+        ColorPasswordPipe,
+        CreateOrganizationComponent,
+        DeauthorizeSessionsComponent,
+        DeleteAccountComponent,
+        DeleteOrganizationComponent,
+        DomainRulesComponent,
+        DownloadLicenseComponent,
+        ExportComponent,
+        ExposedPasswordsReportComponent,
+        FallbackSrcDirective,
+        FolderAddEditComponent,
+        FooterComponent,
+        FrontendLayoutComponent,
+        GroupingsComponent,
+        HintComponent,
+        I18nPipe,
+        IconComponent,
+        ImportComponent,
+        InactiveTwoFactorReportComponent,
+        InputVerbatimDirective,
+        LockComponent,
+        LoginComponent,
+        ModalComponent,
+        NavbarComponent,
+        OptionsComponent,
+        OrgAccountComponent,
+        OrgAddEditComponent,
+        OrgApiKeyComponent,
+        OrganizationBillingComponent,
+        OrganizationPlansComponent,
+        OrganizationSubscriptionComponent,
+        OrgAttachmentsComponent,
+        OrgCiphersComponent,
+        OrgCollectionAddEditComponent,
+        OrgCollectionsComponent,
+        OrgEntityEventsComponent,
+        OrgEntityUsersComponent,
+        OrgEventsComponent,
+        OrgExportComponent,
+        OrgExposedPasswordsReportComponent,
+        OrgImportComponent,
+        OrgInactiveTwoFactorReportComponent,
+        OrgGroupAddEditComponent,
+        OrgGroupingsComponent,
+        OrgGroupsComponent,
+        OrgManageCollectionsComponent,
+        OrgManageComponent,
+        OrgPeopleComponent,
+        OrgPolicyEditComponent,
+        OrgPoliciesComponent,
+        OrgReusedPasswordsReportComponent,
+        OrgRotateApiKeyComponent,
+        OrgSettingComponent,
+        OrgToolsComponent,
+        OrgTwoFactorSetupComponent,
+        OrgUserAddEditComponent,
+        OrgUserConfirmComponent,
+        OrgUserGroupsComponent,
+        OrganizationsComponent,
+        OrganizationLayoutComponent,
+        OrgUnsecuredWebsitesReportComponent,
+        OrgVaultComponent,
+        OrgWeakPasswordsReportComponent,
+        PasswordGeneratorComponent,
+        PasswordGeneratorHistoryComponent,
+        PasswordStrengthComponent,
+        PaymentComponent,
+        PremiumComponent,
+        ProfileComponent,
+        PurgeVaultComponent,
+        RecoverDeleteComponent,
+        RecoverTwoFactorComponent,
+        RegisterComponent,
+        ReusedPasswordsReportComponent,
+        SearchCiphersPipe,
+        SearchPipe,
+        SelectCopyDirective,
+        SettingsComponent,
+        ShareComponent,
+        StopClickDirective,
+        StopPropDirective,
+        ToolsComponent,
+        TrueFalseValueDirective,
+        TwoFactorAuthenticatorComponent,
+        TwoFactorComponent,
+        TwoFactorDuoComponent,
+        TwoFactorEmailComponent,
+        TwoFactorOptionsComponent,
+        TwoFactorRecoveryComponent,
+        TwoFactorSetupComponent,
+        TwoFactorU2fComponent,
+        TwoFactorVerifyComponent,
+        TwoFactorYubiKeyComponent,
+        UnsecuredWebsitesReportComponent,
+        UpdateKeyComponent,
+        UpdateLicenseComponent,
+        UserBillingComponent,
+        UserLayoutComponent,
+        UserSubscriptionComponent,
+        VaultComponent,
+        VerifyEmailComponent,
+        VerifyEmailTokenComponent,
+        VerifyRecoverDeleteComponent,
+        WeakPasswordsReportComponent,
+    ],
+    entryComponents: [
+        AddEditComponent,
+        AttachmentsComponent,
+        BulkDeleteComponent,
+        BulkMoveComponent,
+        BulkRestoreComponent,
+        BulkShareComponent,
+        CollectionsComponent,
+        DeauthorizeSessionsComponent,
+        DeleteAccountComponent,
+        DeleteOrganizationComponent,
+        FolderAddEditComponent,
+        ModalComponent,
+        OrgAddEditComponent,
+        OrgApiKeyComponent,
+        OrgAttachmentsComponent,
+        OrgCollectionAddEditComponent,
+        OrgCollectionsComponent,
+        OrgEntityEventsComponent,
+        OrgEntityUsersComponent,
+        OrgGroupAddEditComponent,
+        OrgPolicyEditComponent,
+        OrgRotateApiKeyComponent,
+        OrgUserAddEditComponent,
+        OrgUserConfirmComponent,
+        OrgUserGroupsComponent,
+        PasswordGeneratorHistoryComponent,
+        PurgeVaultComponent,
+        ShareComponent,
+        TwoFactorAuthenticatorComponent,
+        TwoFactorDuoComponent,
+        TwoFactorEmailComponent,
+        TwoFactorOptionsComponent,
+        TwoFactorRecoveryComponent,
+        TwoFactorU2fComponent,
+        TwoFactorYubiKeyComponent,
+        UpdateKeyComponent,
+    ],
+    providers: [],
+    bootstrap: [AppComponent],
+})
+export class AppModule { }

src/app/components/avatar.component.ts

@@ -0,0 +1,128 @@
+import {
+    Component,
+    Input,
+    OnChanges,
+    OnInit,
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { CryptoFunctionService } from 'jslib/abstractions/cryptoFunction.service';
+import { StateService } from 'jslib/abstractions/state.service';
+
+import { Utils } from 'jslib/misc/utils';
+
+@Component({
+    selector: 'app-avatar',
+    template: '<img [src]="sanitizer.bypassSecurityTrustResourceUrl(src)" title="{{data}}" ' +
+        '[ngClass]="{\'rounded-circle\': circle}">',
+})
+export class AvatarComponent implements OnChanges, OnInit {
+    @Input() data: string;
+    @Input() email: string;
+    @Input() size = 45;
+    @Input() charCount = 2;
+    @Input() textColor = '#ffffff';
+    @Input() fontSize = 20;
+    @Input() fontWeight = 300;
+    @Input() dynamic = false;
+    @Input() circle = false;
+
+    src: string;
+
+    constructor(public sanitizer: DomSanitizer, private cryptoFunctionService: CryptoFunctionService,
+        private stateService: StateService) { }
+
+    ngOnInit() {
+        if (!this.dynamic) {
+            this.generate();
+        }
+    }
+
+    ngOnChanges() {
+        if (this.dynamic) {
+            this.generate();
+        }
+    }
+
+    private async generate() {
+        const enableGravatars = await this.stateService.get<boolean>('enableGravatars');
+        if (enableGravatars && this.email != null) {
+            const hashBytes = await this.cryptoFunctionService.hash(this.email.toLowerCase().trim(), 'md5');
+            const hash = Utils.fromBufferToHex(hashBytes).toLowerCase();
+            this.src = 'https://www.gravatar.com/avatar/' + hash + '?s=' + this.size + '&r=pg&d=retro';
+        } else {
+            let chars: string = null;
+            const upperData = this.data.toUpperCase();
+
+            if (this.charCount > 1) {
+                chars = this.getFirstLetters(upperData, this.charCount);
+            }
+            if (chars == null) {
+                chars = upperData.substr(0, this.charCount);
+            }
+
+            const charObj = this.getCharText(chars);
+            const color = this.stringToColor(upperData);
+            const svg = this.getSvg(this.size, color);
+            svg.appendChild(charObj);
+            const html = window.document.createElement('div').appendChild(svg).outerHTML;
+            const svgHtml = window.btoa(unescape(encodeURIComponent(html)));
+            this.src = 'data:image/svg+xml;base64,' + svgHtml;
+        }
+    }
+
+    private stringToColor(str: string): string {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            // tslint:disable-next-line
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        let color = '#';
+        for (let i = 0; i < 3; i++) {
+            // tslint:disable-next-line
+            const value = (hash >> (i * 8)) & 0xFF;
+            color += ('00' + value.toString(16)).substr(-2);
+        }
+        return color;
+    }
+
+    private getFirstLetters(data: string, count: number): string {
+        const parts = data.split(' ');
+        if (parts.length > 1) {
+            let text = '';
+            for (let i = 0; i < count; i++) {
+                text += parts[i].substr(0, 1);
+            }
+            return text;
+        }
+        return null;
+    }
+
+    private getSvg(size: number, color: string): HTMLElement {
+        const svgTag = window.document.createElement('svg');
+        svgTag.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        svgTag.setAttribute('pointer-events', 'none');
+        svgTag.setAttribute('width', size.toString());
+        svgTag.setAttribute('height', size.toString());
+        svgTag.style.backgroundColor = color;
+        svgTag.style.width = size + 'px';
+        svgTag.style.height = size + 'px';
+        return svgTag;
+    }
+
+    private getCharText(character: string): HTMLElement {
+        const textTag = window.document.createElement('text');
+        textTag.setAttribute('text-anchor', 'middle');
+        textTag.setAttribute('y', '50%');
+        textTag.setAttribute('x', '50%');
+        textTag.setAttribute('dy', '0.35em');
+        textTag.setAttribute('pointer-events', 'auto');
+        textTag.setAttribute('fill', this.textColor);
+        textTag.setAttribute('font-family', '"Open Sans","Helvetica Neue",Helvetica,Arial,' +
+            'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"');
+        textTag.textContent = character;
+        textTag.style.fontWeight = this.fontWeight.toString();
+        textTag.style.fontSize = this.fontSize + 'px';
+        return textTag;
+    }
+}

src/app/components/password-strength.component.html

@@ -0,0 +1,8 @@
+<div class="progress">
+    <div class="progress-bar {{color}}" role="progressbar" [ngStyle]="{width: (scoreWidth + '%')}"
+        attr.aria-valuenow="{{scoreWidth}}" aria-valuemin="0" aria-valuemax="100">
+        <ng-container *ngIf="showText && text">
+            {{text}}
+        </ng-container>
+    </div>
+</div>

src/app/components/password-strength.component.ts

@@ -0,0 +1,44 @@
+import {
+    Component,
+    Input,
+    OnChanges,
+} from '@angular/core';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+@Component({
+    selector: 'app-password-strength',
+    templateUrl: 'password-strength.component.html',
+})
+export class PasswordStrengthComponent implements OnChanges {
+    @Input() score?: number;
+    @Input() showText = false;
+
+    scoreWidth = 0;
+    color = 'bg-danger';
+    text: string;
+
+    constructor(private i18nService: I18nService) { }
+
+    ngOnChanges(): void {
+        this.scoreWidth = this.score == null ? 0 : (this.score + 1) * 20;
+        switch (this.score) {
+            case 4:
+                this.color = 'bg-success';
+                this.text = this.i18nService.t('strong');
+                break;
+            case 3:
+                this.color = 'bg-primary';
+                this.text = this.i18nService.t('good');
+                break;
+            case 2:
+                this.color = 'bg-warning';
+                this.text = this.i18nService.t('weak');
+                break;
+            default:
+                this.color = 'bg-danger';
+                this.text = this.score != null ? this.i18nService.t('weak') : null;
+                break;
+        }
+    }
+}

src/app/dummy.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { ModalComponent } from 'jslib/angular/components/modal.component';
+
+@NgModule({
+    imports: [],
+    declarations: [
+        ModalComponent,
+    ],
+})
+export class DummyModule {
+}

src/app/layouts/footer.component.html

@@ -0,0 +1,11 @@
+<div class="container footer text-muted">
+    <div class="row">
+        <div class="col">
+            &copy; {{year}}, Bitwarden Inc.
+        </div>
+        <div class="col text-center"></div>
+        <div class="col text-right">
+            {{'versionNumber' | i18n : version}}
+        </div>
+    </div>
+</div>

src/app/layouts/footer.component.ts

@@ -0,0 +1,22 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+@Component({
+    selector: 'app-footer',
+    templateUrl: 'footer.component.html',
+})
+export class FooterComponent implements OnInit {
+    version: string;
+    year: string = '2015';
+
+    constructor(private platformUtilsService: PlatformUtilsService) { }
+
+    ngOnInit() {
+        this.year = new Date().getFullYear().toString();
+        this.version = this.platformUtilsService.getApplicationVersion();
+    }
+}

src/app/layouts/frontend-layout.component.html

@@ -0,0 +1,5 @@
+<router-outlet></router-outlet>
+<div class="container my-5 text-muted text-center">
+    &copy; {{year}}, Bitwarden Inc.
+    <br> {{'versionNumber' | i18n : version}}
+</div>

src/app/layouts/frontend-layout.component.ts

@@ -0,0 +1,28 @@
+import {
+    Component,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
+
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+@Component({
+    selector: 'app-frontend-layout',
+    templateUrl: 'frontend-layout.component.html',
+})
+export class FrontendLayoutComponent implements OnInit, OnDestroy {
+    version: string;
+    year: string = '2015';
+
+    constructor(private platformUtilsService: PlatformUtilsService) { }
+
+    ngOnInit() {
+        this.year = new Date().getFullYear().toString();
+        this.version = this.platformUtilsService.getApplicationVersion();
+        document.body.classList.add('layout_frontend');
+    }
+
+    ngOnDestroy() {
+        document.body.classList.remove('layout_frontend');
+    }
+}

src/app/layouts/navbar.component.html

@@ -0,0 +1,59 @@
+<nav class="navbar navbar-expand navbar-dark bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}">
+    <div class="container">
+        <a class="navbar-brand" routerLink="/" appA11yTitle="{{'pageTitle' | i18n : 'Bitwarden'}}">
+            <i class="fa fa-shield" aria-hidden="true"></i>
+        </a>
+        <div class="collapse navbar-collapse">
+            <ul class="navbar-nav">
+                <li class="nav-item" routerLinkActive="active">
+                    <a class="nav-link" routerLink="/vault">{{'myVault' | i18n}}</a>
+                </li>
+                <li class="nav-item" routerLinkActive="active">
+                    <a class="nav-link" routerLink="/tools">{{'tools' | i18n}}</a>
+                </li>
+                <li class="nav-item" routerLinkActive="active">
+                    <a class="nav-link" routerLink="/settings">{{'settings' | i18n}}</a>
+                </li>
+            </ul>
+        </div>
+        <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
+            <li class="nav-item dropdown">
+                <a class="nav-item nav-link dropdown-toggle" href="#" id="nav-profile" data-toggle="dropdown"
+                    aria-haspopup="true" aria-expanded="false">
+                    <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
+                    <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
+                        <app-avatar [data]="name" [email]="email" size="25" fontSize="14" [circle]="true"></app-avatar>
+                        <div class="ml-2 overflow-hidden">
+                            <span>{{'loggedInAs' | i18n}}</span>
+                            <small class="text-muted">{{name}}</small>
+                        </div>
+                    </div>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#" routerLink="/settings/account">
+                        <i class="fa fa-fw fa-user" aria-hidden="true"></i>
+                        {{'myAccount' | i18n}}
+                    </a>
+                    <a class="dropdown-item" href="https://help.bitwarden.com" target="_blank" rel="noopener">
+                        <i class="fa fa-fw fa-question-circle" aria-hidden="true"></i>
+                        {{'getHelp' | i18n}}
+                    </a>
+                    <a class="dropdown-item" href="https://bitwarden.com#download" target="_blank" rel="noopener">
+                        <i class="fa fa-fw fa-download" aria-hidden="true"></i>
+                        {{'getApps' | i18n}}
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <button type="button" class="dropdown-item" (click)="lock()">
+                        <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
+                        {{'lockNow' | i18n}}
+                    </button>
+                    <button type="button" class="dropdown-item" (click)="logOut()">
+                        <i class="fa fa-fw fa-sign-out" aria-hidden="true"></i>
+                        {{'logOut' | i18n}}
+                    </button>
+                </div>
+            </li>
+        </ul>
+    </div>
+</nav>

src/app/layouts/navbar.component.ts

@@ -0,0 +1,39 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { TokenService } from 'jslib/abstractions/token.service';
+
+@Component({
+    selector: 'app-navbar',
+    templateUrl: 'navbar.component.html',
+})
+export class NavbarComponent implements OnInit {
+    selfHosted = false;
+    name: string;
+    email: string;
+
+    constructor(private messagingService: MessagingService, private platformUtilsService: PlatformUtilsService,
+        private tokenService: TokenService) {
+        this.selfHosted = this.platformUtilsService.isSelfHost();
+    }
+
+    async ngOnInit() {
+        this.name = await this.tokenService.getName();
+        this.email = await this.tokenService.getEmail();
+        if (this.name == null || this.name.trim() === '') {
+            this.name = this.email;
+        }
+    }
+
+    lock() {
+        this.messagingService.send('lockVault');
+    }
+
+    logOut() {
+        this.messagingService.send('logout');
+    }
+}

src/app/layouts/organization-layout.component.html

@@ -0,0 +1,46 @@
+<app-navbar></app-navbar>
+<div class="org-nav" *ngIf="organization">
+    <div class="container d-flex flex-column">
+        <div class="my-auto d-flex align-items-center pl-1">
+            <app-avatar [data]="organization.name" size="45" [circle]="true"></app-avatar>
+            <div class="org-name ml-3">
+                <span>{{organization.name}}</span>
+                <small class="text-muted">{{'organization' | i18n}}</small>
+            </div>
+            <div class="ml-auto card border-danger text-danger bg-transparent" *ngIf="!organization.enabled">
+                <div class="card-body py-2">
+                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                    {{'organizationIsDisabled' | i18n}}
+                </div>
+            </div>
+        </div>
+        <ul class="nav nav-tabs" *ngIf="organization.isManager">
+            <li class="nav-item">
+                <a class="nav-link" routerLink="vault" routerLinkActive="active">
+                    <i class="fa fa-lock" aria-hidden="true"></i>
+                    {{'vault' | i18n}}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" routerLink="manage" routerLinkActive="active">
+                    <i class="fa fa-sliders" aria-hidden="true"></i>
+                    {{'manage' | i18n}}
+                </a>
+            </li>
+            <li class="nav-item" *ngIf="organization.isAdmin">
+                <a class="nav-link" routerLink="tools" routerLinkActive="active">
+                    <i class="fa fa-wrench" aria-hidden="true"></i>
+                    {{'tools' | i18n}}
+                </a>
+            </li>
+            <li class="nav-item" *ngIf="organization.isOwner">
+                <a class="nav-link" routerLink="settings" routerLinkActive="active">
+                    <i class="fa fa-cogs" aria-hidden="true"></i>
+                    {{'settings' | i18n}}
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+<router-outlet></router-outlet>
+<app-footer></app-footer>

src/app/layouts/organization-layout.component.ts

@@ -0,0 +1,54 @@
+import {
+    Component,
+    NgZone,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { Organization } from 'jslib/models/domain/organization';
+
+const BroadcasterSubscriptionId = 'OrganizationLayoutComponent';
+
+@Component({
+    selector: 'app-organization-layout',
+    templateUrl: 'organization-layout.component.html',
+})
+export class OrganizationLayoutComponent implements OnInit, OnDestroy {
+    organization: Organization;
+
+    private organizationId: string;
+
+    constructor(private route: ActivatedRoute, private userService: UserService,
+        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
+
+    ngOnInit() {
+        document.body.classList.remove('layout_frontend');
+        this.route.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            await this.load();
+        });
+
+        this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
+            this.ngZone.run(async () => {
+                switch (message.command) {
+                    case 'updatedOrgLicense':
+                        await this.load();
+                        break;
+                }
+            });
+        });
+    }
+
+    ngOnDestroy() {
+        this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+    }
+
+    async load() {
+        this.organization = await this.userService.getOrganization(this.organizationId);
+    }
+}

src/app/layouts/user-layout.component.html

@@ -0,0 +1,3 @@
+<app-navbar></app-navbar>
+<router-outlet></router-outlet>
+<app-footer></app-footer>

src/app/layouts/user-layout.component.ts

@@ -0,0 +1,14 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-user-layout',
+    templateUrl: 'user-layout.component.html',
+})
+export class UserLayoutComponent implements OnInit {
+    ngOnInit() {
+        document.body.classList.remove('layout_frontend');
+    }
+}

src/app/main.ts

@@ -0,0 +1,17 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import 'bootstrap';
+import 'jquery';
+import 'popper.js';
+
+// tslint:disable-next-line
+require('../scss/styles.scss');
+
+import { AppModule } from './app.module';
+
+if (process.env.ENV === 'production') {
+    enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true });

src/app/modal.component.ts

@@ -0,0 +1,76 @@
+import * as jq from 'jquery';
+
+import {
+    Component,
+    ComponentFactoryResolver,
+    Type,
+    ViewContainerRef,
+} from '@angular/core';
+
+import { ModalComponent as BaseModalComponent } from 'jslib/angular/components/modal.component';
+import { Utils } from 'jslib/misc/utils';
+
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+
+@Component({
+    selector: 'app-modal',
+    template: `<ng-template #container></ng-template>`,
+})
+export class ModalComponent extends BaseModalComponent {
+    el: any = null;
+
+    constructor(componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService) {
+        super(componentFactoryResolver, messagingService);
+    }
+
+    ngOnDestroy() { /* Nothing */ }
+
+    show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true,
+        setComponentParameters: (component: T) => void = null): T {
+        this.parentContainer = parentContainer;
+        this.fade = fade;
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
+        const componentRef = this.container.createComponent<T>(factory);
+        if (setComponentParameters != null) {
+            setComponentParameters(componentRef.instance);
+        }
+
+        const modals = Array.from(document.querySelectorAll('.modal'));
+        if (modals.length > 0) {
+            this.el = jq(modals[0]);
+            this.el.modal('show');
+
+            this.el.on('show.bs.modal', () => {
+                this.onShow.emit();
+                this.messagingService.send('modalShow');
+            });
+            this.el.on('shown.bs.modal', () => {
+                this.onShown.emit();
+                this.messagingService.send('modalShown');
+                if (!Utils.isMobileBrowser) {
+                    this.el.find('*[appAutoFocus]').focus();
+                }
+            });
+            this.el.on('hide.bs.modal', () => {
+                this.onClose.emit();
+                this.messagingService.send('modalClose');
+            });
+            this.el.on('hidden.bs.modal', () => {
+                this.onClosed.emit();
+                this.messagingService.send('modalClosed');
+                if (this.parentContainer != null) {
+                    this.parentContainer.clear();
+                }
+            });
+        }
+
+        return componentRef.instance;
+    }
+
+    close() {
+        if (this.el != null) {
+            this.el.modal('hide');
+        }
+    }
+}

src/app/organizations/manage/collection-add-edit.component.html

@@ -0,0 +1,89 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+            <div class="modal-header">
+                <h2 class="modal-title" id="collectionAddEditTitle">{{title}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="loading">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body" *ngIf="!loading">
+                <div class="form-group">
+                    <label for="name">{{'name' | i18n}}</label>
+                    <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
+                </div>
+                <div class="form-group">
+                    <label for="externalId">{{'externalId' | i18n}}</label>
+                    <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId">
+                    <small class="form-text text-muted">{{'externalIdDesc' | i18n}}</small>
+                </div>
+                <ng-container *ngIf="accessGroups">
+                    <h3 class="mt-4 d-flex mb-0">
+                        {{'groupAccess' | i18n}}
+                        <div class="ml-auto" *ngIf="groups && groups.length">
+                            <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
+                                {{'selectAll' | i18n}}
+                            </button>
+                            <button type="button" (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
+                                {{'unselectAll' | i18n}}
+                            </button>
+                        </div>
+                    </h3>
+                    <div *ngIf="!groups || !groups.length">
+                        {{'noGroupsInList' | i18n}}
+                    </div>
+                    <table class="table table-hover table-list mb-0" *ngIf="groups && groups.length">
+                        <thead>
+                            <tr>
+                                <th>&nbsp;</th>
+                                <th>{{'name' | i18n}}</th>
+                                <th width="100" class="text-center">{{'readOnly' | i18n}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let g of groups; let i = index">
+                                <td class="table-list-checkbox" (click)="check(g)">
+                                    <input type="checkbox" [(ngModel)]="g.checked" name="Groups[{{i}}].Checked"
+                                        [disabled]="g.accessAll" appStopProp>
+                                </td>
+                                <td (click)="check(g)">
+                                    {{g.name}}
+                                    <ng-container *ngIf="g.accessAll">
+                                        <i class="fa fa-th text-muted fa-fw" title="{{'groupAccessAllItems' | i18n}}"
+                                            aria-hidden="true"></i>
+                                        <span class="sr-only">{{'groupAccessAllItems' | i18n}}</span>
+                                    </ng-container>
+                                </td>
+                                <td class="text-center">
+                                    <input type="checkbox" [(ngModel)]="g.readOnly" name="Groups[{{i}}].ReadOnly"
+                                        [disabled]="!g.checked || g.accessAll">
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </ng-container>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
+                <div class="ml-auto">
+                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

src/app/organizations/manage/collection-add-edit.component.ts

@@ -0,0 +1,152 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { CipherString } from 'jslib/models/domain/cipherString';
+import { SymmetricCryptoKey } from 'jslib/models/domain/symmetricCryptoKey';
+import { CollectionRequest } from 'jslib/models/request/collectionRequest';
+import { SelectionReadOnlyRequest } from 'jslib/models/request/selectionReadOnlyRequest';
+import { GroupResponse } from 'jslib/models/response/groupResponse';
+
+import { Utils } from 'jslib/misc/utils';
+
+@Component({
+    selector: 'app-collection-add-edit',
+    templateUrl: 'collection-add-edit.component.html',
+})
+export class CollectionAddEditComponent implements OnInit {
+    @Input() collectionId: string;
+    @Input() organizationId: string;
+    @Output() onSavedCollection = new EventEmitter();
+    @Output() onDeletedCollection = new EventEmitter();
+
+    loading = true;
+    editMode: boolean = false;
+    accessGroups: boolean = false;
+    title: string;
+    name: string;
+    externalId: string;
+    groups: GroupResponse[] = [];
+    formPromise: Promise<any>;
+    deletePromise: Promise<any>;
+
+    private orgKey: SymmetricCryptoKey;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private platformUtilsService: PlatformUtilsService, private cryptoService: CryptoService,
+        private userService: UserService) { }
+
+    async ngOnInit() {
+        const organization = await this.userService.getOrganization(this.organizationId);
+        this.accessGroups = organization.useGroups;
+        this.editMode = this.loading = this.collectionId != null;
+        if (this.accessGroups) {
+            const groupsResponse = await this.apiService.getGroups(this.organizationId);
+            this.groups = groupsResponse.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, 'name'));
+        }
+        this.orgKey = await this.cryptoService.getOrgKey(this.organizationId);
+
+        if (this.editMode) {
+            this.editMode = true;
+            this.title = this.i18nService.t('editCollection');
+            try {
+                const collection = await this.apiService.getCollectionDetails(this.organizationId, this.collectionId);
+                this.name = await this.cryptoService.decryptToUtf8(new CipherString(collection.name), this.orgKey);
+                this.externalId = collection.externalId;
+                if (collection.groups != null && this.groups.length > 0) {
+                    collection.groups.forEach((s) => {
+                        const group = this.groups.filter((g) => !g.accessAll && g.id === s.id);
+                        if (group != null && group.length > 0) {
+                            (group[0] as any).checked = true;
+                            (group[0] as any).readOnly = s.readOnly;
+                        }
+                    });
+                }
+            } catch { }
+        } else {
+            this.title = this.i18nService.t('addCollection');
+        }
+
+        this.groups.forEach((g) => {
+            if (g.accessAll) {
+                (g as any).checked = true;
+            }
+        });
+
+        this.loading = false;
+    }
+
+    check(g: GroupResponse, select?: boolean) {
+        if (g.accessAll) {
+            return;
+        }
+        (g as any).checked = select == null ? !(g as any).checked : select;
+        if (!(g as any).checked) {
+            (g as any).readOnly = false;
+        }
+    }
+
+    selectAll(select: boolean) {
+        this.groups.forEach((g) => this.check(g, select));
+    }
+
+    async submit() {
+        if (this.orgKey == null) {
+            throw new Error('No encryption key for this organization.');
+        }
+
+        const request = new CollectionRequest();
+        request.name = (await this.cryptoService.encrypt(this.name, this.orgKey)).encryptedString;
+        request.externalId = this.externalId;
+        request.groups = this.groups.filter((g) => (g as any).checked && !g.accessAll)
+            .map((g) => new SelectionReadOnlyRequest(g.id, !!(g as any).readOnly));
+
+        try {
+            if (this.editMode) {
+                this.formPromise = this.apiService.putCollection(this.organizationId, this.collectionId, request);
+            } else {
+                this.formPromise = this.apiService.postCollection(this.organizationId, request);
+            }
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Collection' : 'Created Collection' });
+            this.toasterService.popAsync('success', null,
+                this.i18nService.t(this.editMode ? 'editedCollectionId' : 'createdCollectionId', this.name));
+            this.onSavedCollection.emit();
+        } catch { }
+    }
+
+    async delete() {
+        if (!this.editMode) {
+            return;
+        }
+
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('deleteCollectionConfirmation'), this.name,
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            this.deletePromise = this.apiService.deleteCollection(this.organizationId, this.collectionId);
+            await this.deletePromise;
+            this.analytics.eventTrack.next({ action: 'Deleted Collection' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('deletedCollectionId', this.name));
+            this.onDeletedCollection.emit();
+        } catch { }
+    }
+}

src/app/organizations/manage/collections.component.html

@@ -0,0 +1,50 @@
+<div class="page-header d-flex">
+    <h1>{{'collections' | i18n}}</h1>
+    <div class="ml-auto d-flex">
+        <div>
+            <label class="sr-only" for="search">{{'search' | i18n}}</label>
+            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
+                [(ngModel)]="searchText">
+        </div>
+        <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
+            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+            {{'newCollection' | i18n}}
+        </button>
+    </div>
+</div>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<ng-container *ngIf="!loading && (collections | search:searchText:'name':'id') as searchedCollections">
+    <p *ngIf="!searchedCollections.length">{{'noCollectionsInList' | i18n}}</p>
+    <table class="table table-hover table-list" *ngIf="searchedCollections.length">
+        <tbody>
+            <tr *ngFor="let c of searchedCollections">
+                <td>
+                    <a href="#" appStopClick (click)="edit(c)">{{c.name}}</a>
+                </td>
+                <td class="table-list-options">
+                    <div class="dropdown" appListDropdown>
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false" appA11yTitle="{{'options' | i18n}}">
+                            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            <a class="dropdown-item" href="#" appStopClick (click)="users(c)">
+                                <i class="fa fa-fw fa-users" aria-hidden="true"></i>
+                                {{'users' | i18n}}
+                            </a>
+                            <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(c)">
+                                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                                {{'delete' | i18n}}
+                            </a>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</ng-container>
+<ng-template #addEdit></ng-template>
+<ng-template #usersTemplate></ng-template>

src/app/organizations/manage/collections.component.ts

@@ -0,0 +1,156 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    OnInit,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CollectionService } from 'jslib/abstractions/collection.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { CollectionData } from 'jslib/models/data/collectionData';
+import { Collection } from 'jslib/models/domain/collection';
+import {
+    CollectionDetailsResponse,
+    CollectionResponse,
+} from 'jslib/models/response/collectionResponse';
+import { ListResponse } from 'jslib/models/response/listResponse';
+import { CollectionView } from 'jslib/models/view/collectionView';
+
+import { ModalComponent } from '../../modal.component';
+import { CollectionAddEditComponent } from './collection-add-edit.component';
+import { EntityUsersComponent } from './entity-users.component';
+
+@Component({
+    selector: 'app-org-manage-collections',
+    templateUrl: 'collections.component.html',
+})
+export class CollectionsComponent implements OnInit {
+    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
+    @ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
+
+    loading = true;
+    organizationId: string;
+    collections: CollectionView[];
+    searchText: string;
+
+    private modal: ModalComponent = null;
+
+    constructor(private apiService: ApiService, private route: ActivatedRoute,
+        private collectionService: CollectionService, private componentFactoryResolver: ComponentFactoryResolver,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
+        private userService: UserService) { }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            await this.load();
+            const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
+                this.searchText = qParams.search;
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
+            });
+        });
+    }
+
+    async load() {
+        const organization = await this.userService.getOrganization(this.organizationId);
+        let response: ListResponse<CollectionResponse>;
+        if (organization.isAdmin) {
+            response = await this.apiService.getCollections(this.organizationId);
+        } else {
+            response = await this.apiService.getUserCollections();
+        }
+        const collections = response.data.filter((c) => c.organizationId === this.organizationId).map((r) =>
+            new Collection(new CollectionData(r as CollectionDetailsResponse)));
+        this.collections = await this.collectionService.decryptMany(collections);
+        this.loading = false;
+    }
+
+    edit(collection: CollectionView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<CollectionAddEditComponent>(
+            CollectionAddEditComponent, this.addEditModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.collectionId = collection != null ? collection.id : null;
+        childComponent.onSavedCollection.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+        childComponent.onDeletedCollection.subscribe(() => {
+            this.modal.close();
+            this.removeCollection(collection);
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    add() {
+        this.edit(null);
+    }
+
+    async delete(collection: CollectionView) {
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('deleteCollectionConfirmation'), collection.name,
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            await this.apiService.deleteCollection(this.organizationId, collection.id);
+            this.analytics.eventTrack.next({ action: 'Deleted Collection' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('deletedCollectionId', collection.name));
+            this.removeCollection(collection);
+        } catch { }
+    }
+
+    users(collection: CollectionView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.usersModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EntityUsersComponent>(
+            EntityUsersComponent, this.usersModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.entity = 'collection';
+        childComponent.entityId = collection.id;
+        childComponent.entityName = collection.name;
+
+        childComponent.onEditedUsers.subscribe(() => {
+            this.load();
+            this.modal.close();
+        });
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    private removeCollection(collection: CollectionView) {
+        const index = this.collections.indexOf(collection);
+        if (index > -1) {
+            this.collections.splice(index, 1);
+        }
+    }
+}

src/app/organizations/manage/entity-events.component.html

@@ -0,0 +1,77 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="eventLogsTitle">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title" id="eventLogsTitle">
+                    {{'eventLogs' | i18n}}
+                    <small class="text-muted" *ngIf="name">{{name}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="!loaded">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body" *ngIf="loaded">
+                <div class="d-flex">
+                    <div class="form-inline">
+                        <label class="sr-only" for="start">{{'startDate' | i18n}}</label>
+                        <input type="datetime-local" class="form-control form-control-sm" id="start"
+                            placeholder="{{'startDate' | i18n}}" [(ngModel)]="start" placeholder="YYYY-MM-DDTHH:MM">
+                        <span class="mx-2">-</span>
+                        <label class="sr-only" for="end">{{'endDate' | i18n}}</label>
+                        <input type="datetime-local" class="form-control form-control-sm" id="end"
+                            placeholder="{{'endDate' | i18n}}" [(ngModel)]="end" placeholder="YYYY-MM-DDTHH:MM">
+                    </div>
+                    <button #refreshBtn [appApiAction]="refreshPromise" type="button"
+                        class="btn btn-sm btn-outline-primary ml-3" (click)="loadEvents(true)"
+                        [disabled]="loaded && refreshBtn.loading">
+                        <i class="fa fa-refresh fa-fw" [ngClass]="{'fa-spin': loaded && refreshBtn.loading}"
+                            aria-hidden="true"></i>
+                        {{'refresh' | i18n}}
+                    </button>
+                </div>
+                <hr>
+                <div *ngIf="!events || !events.length">
+                    {{'noEventsInList' | i18n}}
+                </div>
+                <table class="table table-hover mb-0" *ngIf="events && events.length">
+                    <thead>
+                        <tr>
+                            <th class="border-top-0" width="210">{{'timestamp' | i18n}}</th>
+                            <th class="border-top-0" width="40">
+                                <span class="sr-only">{{'device' | i18n}}</span>
+                            </th>
+                            <th class="border-top-0" width="150" *ngIf="showUser">{{'user' | i18n}}</th>
+                            <th class="border-top-0">{{'event' | i18n}}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let e of events">
+                            <td>{{e.date | date:'medium'}}</td>
+                            <td>
+                                <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
+                            </td>
+                            <td *ngIf="showUser">
+                                <span appA11yTitle="{{e.userEmail}}">{{e.userName}}</span>
+                            </td>
+                            <td [innerHTML]="e.message"></td>
+                        </tr>
+                    </tbody>
+                </table>
+                <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
+                    (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'loadMore' | i18n}}</span>
+                </button>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/organizations/manage/entity-events.component.ts

@@ -0,0 +1,125 @@
+import {
+    Component,
+    Input,
+    OnInit,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { EventService } from '../../services/event.service';
+
+import { EventResponse } from 'jslib/models/response/eventResponse';
+import { ListResponse } from 'jslib/models/response/listResponse';
+
+@Component({
+    selector: 'app-entity-events',
+    templateUrl: 'entity-events.component.html',
+})
+export class EntityEventsComponent implements OnInit {
+    @Input() name: string;
+    @Input() entity: 'user' | 'cipher';
+    @Input() entityId: string;
+    @Input() organizationId: string;
+    @Input() showUser = false;
+
+    loading = true;
+    loaded = false;
+    events: any[];
+    start: string;
+    end: string;
+    continuationToken: string;
+    refreshPromise: Promise<any>;
+    morePromise: Promise<any>;
+
+    private orgUsersUserIdMap = new Map<string, any>();
+    private orgUsersIdMap = new Map<string, any>();
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private eventService: EventService, private toasterService: ToasterService) { }
+
+    async ngOnInit() {
+        const defaultDates = this.eventService.getDefaultDateFilters();
+        this.start = defaultDates[0];
+        this.end = defaultDates[1];
+        await this.load();
+    }
+
+    async load() {
+        if (this.showUser) {
+            const response = await this.apiService.getOrganizationUsers(this.organizationId);
+            response.data.forEach((u) => {
+                const name = u.name == null || u.name.trim() === '' ? u.email : u.name;
+                this.orgUsersIdMap.set(u.id, { name: name, email: u.email });
+                this.orgUsersUserIdMap.set(u.userId, { name: name, email: u.email });
+            });
+        }
+        await this.loadEvents(true);
+        this.loaded = true;
+    }
+
+    async loadEvents(clearExisting: boolean) {
+        if (this.refreshPromise != null || this.morePromise != null) {
+            return;
+        }
+
+        let dates: string[] = null;
+        try {
+            dates = this.eventService.formatDateFilters(this.start, this.end);
+        } catch (e) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('invalidDateRange'));
+            return;
+        }
+
+        this.loading = true;
+        let response: ListResponse<EventResponse>;
+        try {
+            let promise: Promise<any>;
+            if (this.entity === 'user') {
+                promise = this.apiService.getEventsOrganizationUser(this.organizationId, this.entityId,
+                    dates[0], dates[1], clearExisting ? null : this.continuationToken);
+            } else {
+                promise = this.apiService.getEventsCipher(this.entityId,
+                    dates[0], dates[1], clearExisting ? null : this.continuationToken);
+            }
+            if (clearExisting) {
+                this.refreshPromise = promise;
+            } else {
+                this.morePromise = promise;
+            }
+            response = await promise;
+        } catch { }
+
+        this.continuationToken = response.continuationToken;
+        const events = response.data.map((r) => {
+            const userId = r.actingUserId == null ? r.userId : r.actingUserId;
+            const eventInfo = this.eventService.getEventInfo(r);
+            const user = this.showUser && userId != null && this.orgUsersUserIdMap.has(userId) ?
+                this.orgUsersUserIdMap.get(userId) : null;
+            return {
+                message: eventInfo.message,
+                appIcon: eventInfo.appIcon,
+                appName: eventInfo.appName,
+                userId: userId,
+                userName: user != null ? user.name : this.showUser ? this.i18nService.t('unknown') : null,
+                userEmail: user != null ? user.email : this.showUser ? '' : null,
+                date: r.date,
+                ip: r.ipAddress,
+                type: r.type,
+            };
+        });
+
+        if (!clearExisting && this.events != null && this.events.length > 0) {
+            this.events = this.events.concat(events);
+        } else {
+            this.events = events;
+        }
+
+        this.loading = false;
+        this.morePromise = null;
+        this.refreshPromise = null;
+    }
+}

src/app/organizations/manage/entity-users.component.html

@@ -0,0 +1,106 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
+    <div class="modal-dialog modal-lg" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+            <div class="modal-header">
+                <h2 class="modal-title" id="userAccessTitle">
+                    {{'userAccess' | i18n}}
+                    <small>{{entityName}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="loading || !users">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body"
+                *ngIf="!loading && users && (users | search:searchText:'name':'email':'id') as searchedUsers">
+                <div class="d-flex">
+                    <div class="mr-3">
+                        <label class="sr-only" for="search">{{'search' | i18n}}</label>
+                        <input type="search" class="form-control form-control-sm" id="search"
+                            placeholder="{{'search' | i18n}}" name="SearchText" [(ngModel)]="searchText">
+                    </div>
+                    <div class="btn-group btn-group-sm" role="group">
+                        <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: !showSelected}"
+                            (click)="filterSelected(false)">
+                            {{'all' | i18n}}
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: showSelected}"
+                            (click)="filterSelected(true)">
+                            {{'selected' | i18n}}
+                            <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{selectedCount}}</span>
+                        </button>
+                    </div>
+                </div>
+                <ng-container *ngIf="!searchedUsers.length">
+                    <hr>
+                    {{'noUsersInList' | i18n}}
+                </ng-container>
+                <ng-container *ngIf="searchedUsers.length">
+                    <table class="table table-hover table-list mb-0">
+                        <thead>
+                            <tr>
+                                <th>&nbsp;</th>
+                                <th>&nbsp;</th>
+                                <th>{{'name' | i18n}}</th>
+                                <th *ngIf="entity === 'collection'">&nbsp;</th>
+                                <th>{{'userType' | i18n}}</th>
+                                <th width="100" class="text-center" *ngIf="entity === 'collection'">{{'readOnly' |
+                                    i18n}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let u of searchedUsers">
+                                <td class="table-list-checkbox" (click)="check(u)">
+                                    <input type="checkbox" [(ngModel)]="u.checked" name="{{u.id.substr(0,8)}}_Checked"
+                                        [disabled]="entity === 'collection' && u.accessAll"
+                                        (change)="selectedChanged(u)" appStopProp>
+                                </td>
+                                <td width="30" (click)="check(u)">
+                                    <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
+                                        [fontSize]="14"></app-avatar>
+                                </td>
+                                <td>
+                                    {{u.email}}
+                                    <span class="badge badge-secondary"
+                                        *ngIf="u.status === organizationUserStatusType.Invited">{{'invited'
+                                        | i18n}}</span>
+                                    <span class="badge badge-warning"
+                                        *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted'
+                                        | i18n}}</span>
+                                    <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
+                                </td>
+                                <td *ngIf="entity === 'collection'">
+                                    <ng-container *ngIf="u.accessAll">
+                                        <i class="fa fa-th" title="{{'userAccessAllItems' | i18n}}"
+                                            aria-hidden="true"></i>
+                                        <span class="sr-only">{{'userAccessAllItems' | i18n}}</span>
+                                    </ng-container>
+                                </td>
+                                <td>
+                                    <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
+                                    <span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
+                                    <span *ngIf="u.type === organizationUserType.Manager">{{'manager' | i18n}}</span>
+                                    <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
+                                </td>
+                                <td class="text-center" *ngIf="entity === 'collection'">
+                                    <input type="checkbox" [(ngModel)]="u.readOnly" name="{{u.id.substr(0,8)}}_ReadOnly"
+                                        [disabled]="u.accessAll || !u.checked">
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </ng-container>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/organizations/manage/entity-users.component.ts

@@ -0,0 +1,137 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { OrganizationUserStatusType } from 'jslib/enums/organizationUserStatusType';
+import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+import { SelectionReadOnlyRequest } from 'jslib/models/request/selectionReadOnlyRequest';
+import { OrganizationUserUserDetailsResponse } from 'jslib/models/response/organizationUserResponse';
+
+import { Utils } from 'jslib/misc/utils';
+
+@Component({
+    selector: 'app-entity-users',
+    templateUrl: 'entity-users.component.html',
+})
+export class EntityUsersComponent implements OnInit {
+    @Input() entity: 'group' | 'collection';
+    @Input() entityId: string;
+    @Input() entityName: string;
+    @Input() organizationId: string;
+    @Output() onEditedUsers = new EventEmitter();
+
+    organizationUserType = OrganizationUserType;
+    organizationUserStatusType = OrganizationUserStatusType;
+
+    showSelected = false;
+    loading = true;
+    formPromise: Promise<any>;
+    selectedCount = 0;
+    searchText: string;
+
+    private allUsers: OrganizationUserUserDetailsResponse[] = [];
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService) { }
+
+    async ngOnInit() {
+        await this.loadUsers();
+        this.loading = false;
+    }
+
+    get users() {
+        if (this.showSelected) {
+            return this.allUsers.filter((u) => (u as any).checked);
+        } else {
+            return this.allUsers;
+        }
+    }
+
+    async loadUsers() {
+        const users = await this.apiService.getOrganizationUsers(this.organizationId);
+        this.allUsers = users.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, 'email'));
+        if (this.entity === 'group') {
+            const response = await this.apiService.getGroupUsers(this.organizationId, this.entityId);
+            if (response != null && users.data.length > 0) {
+                response.forEach((s) => {
+                    const user = users.data.filter((u) => u.id === s);
+                    if (user != null && user.length > 0) {
+                        (user[0] as any).checked = true;
+                    }
+                });
+            }
+        } else if (this.entity === 'collection') {
+            const response = await this.apiService.getCollectionUsers(this.organizationId, this.entityId);
+            if (response != null && users.data.length > 0) {
+                response.forEach((s) => {
+                    const user = users.data.filter((u) => !u.accessAll && u.id === s.id);
+                    if (user != null && user.length > 0) {
+                        (user[0] as any).checked = true;
+                        (user[0] as any).readOnly = s.readOnly;
+                    }
+                });
+            }
+        }
+
+        this.allUsers.forEach((u) => {
+            if (this.entity === 'collection' && u.accessAll) {
+                (u as any).checked = true;
+            }
+            if ((u as any).checked) {
+                this.selectedCount++;
+            }
+        });
+    }
+
+    check(u: OrganizationUserUserDetailsResponse) {
+        if (this.entity === 'collection' && u.accessAll) {
+            return;
+        }
+        (u as any).checked = !(u as any).checked;
+        this.selectedChanged(u);
+    }
+
+    selectedChanged(u: OrganizationUserUserDetailsResponse) {
+        if ((u as any).checked) {
+            this.selectedCount++;
+        } else {
+            if (this.entity === 'collection') {
+                (u as any).readOnly = false;
+            }
+            this.selectedCount--;
+        }
+    }
+
+    filterSelected(showSelected: boolean) {
+        this.showSelected = showSelected;
+    }
+
+    async submit() {
+        try {
+            if (this.entity === 'group') {
+                const selections = this.users.filter((u) => (u as any).checked).map((u) => u.id);
+                this.formPromise = this.apiService.putGroupUsers(this.organizationId, this.entityId, selections);
+            } else {
+                const selections = this.users.filter((u) => (u as any).checked && !u.accessAll)
+                    .map((u) => new SelectionReadOnlyRequest(u.id, !!(u as any).readOnly));
+                this.formPromise = this.apiService.putCollectionUsers(this.organizationId, this.entityId, selections);
+            }
+            await this.formPromise;
+            this.analytics.eventTrack.next({
+                action: this.entity === 'group' ? 'Edited Group Users' : 'Edited Collection Users',
+            });
+            this.toasterService.popAsync('success', null, this.i18nService.t('updatedUsers'));
+            this.onEditedUsers.emit();
+        } catch { }
+    }
+}

src/app/organizations/manage/events.component.html

@@ -0,0 +1,56 @@
+<div class="page-header d-flex">
+    <h1>{{'eventLogs' | i18n}}</h1>
+    <div class="ml-auto d-flex">
+        <div class="form-inline">
+            <label class="sr-only" for="start">{{'startDate' | i18n}}</label>
+            <input type="datetime-local" class="form-control form-control-sm" id="start"
+                placeholder="{{'startDate' | i18n}}" [(ngModel)]="start" placeholder="YYYY-MM-DDTHH:MM">
+            <span class="mx-2">-</span>
+            <label class="sr-only" for="end">{{'endDate' | i18n}}</label>
+            <input type="datetime-local" class="form-control form-control-sm" id="end"
+                placeholder="{{'endDate' | i18n}}" [(ngModel)]="end" placeholder="YYYY-MM-DDTHH:MM">
+        </div>
+        <button #refreshBtn [appApiAction]="refreshPromise" type="button" class="btn btn-sm btn-outline-primary ml-3"
+            (click)="loadEvents(true)" [disabled]="loaded && refreshBtn.loading">
+            <i class="fa fa-refresh fa-fw" aria-hidden="true" [ngClass]="{'fa-spin': loaded && refreshBtn.loading}"></i>
+            {{'refresh' | i18n}}
+        </button>
+    </div>
+</div>
+<ng-container *ngIf="!loaded">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<ng-container *ngIf="loaded">
+    <p *ngIf="!events || !events.length">{{'noEventsInList' | i18n}}</p>
+    <table class="table table-hover" *ngIf="events && events.length">
+        <thead>
+            <tr>
+                <th class="border-top-0" width="210">{{'timestamp' | i18n}}</th>
+                <th class="border-top-0" width="40">
+                    <span class="sr-only">{{'device' | i18n}}</span>
+                </th>
+                <th class="border-top-0" width="150">{{'user' | i18n}}</th>
+                <th class="border-top-0">{{'event' | i18n}}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let e of events">
+                <td>{{e.date | date:'medium'}}</td>
+                <td>
+                    <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}" aria-hidden="true"></i>
+                    <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
+                </td>
+                <td>
+                    <span title="{{e.userEmail}}">{{e.userName}}</span>
+                </td>
+                <td [innerHTML]="e.message"></td>
+            </tr>
+        </tbody>
+    </table>
+    <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
+        (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+        <span>{{'loadMore' | i18n}}</span>
+    </button>
+</ng-container>

src/app/organizations/manage/events.component.ts

@@ -0,0 +1,123 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { EventService } from '../../services/event.service';
+
+import { EventResponse } from 'jslib/models/response/eventResponse';
+import { ListResponse } from 'jslib/models/response/listResponse';
+
+@Component({
+    selector: 'app-org-events',
+    templateUrl: 'events.component.html',
+})
+export class EventsComponent implements OnInit {
+    loading = true;
+    loaded = false;
+    organizationId: string;
+    events: any[];
+    start: string;
+    end: string;
+    continuationToken: string;
+    refreshPromise: Promise<any>;
+    morePromise: Promise<any>;
+
+    private orgUsersUserIdMap = new Map<string, any>();
+    private orgUsersIdMap = new Map<string, any>();
+
+    constructor(private apiService: ApiService, private route: ActivatedRoute,
+        private eventService: EventService, private i18nService: I18nService,
+        private toasterService: ToasterService, private userService: UserService,
+        private router: Router) { }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            const organization = await this.userService.getOrganization(this.organizationId);
+            if (organization == null || !organization.useEvents) {
+                this.router.navigate(['/organizations', this.organizationId]);
+                return;
+            }
+            const defaultDates = this.eventService.getDefaultDateFilters();
+            this.start = defaultDates[0];
+            this.end = defaultDates[1];
+            await this.load();
+        });
+    }
+
+    async load() {
+        const response = await this.apiService.getOrganizationUsers(this.organizationId);
+        response.data.forEach((u) => {
+            const name = u.name == null || u.name.trim() === '' ? u.email : u.name;
+            this.orgUsersIdMap.set(u.id, { name: name, email: u.email });
+            this.orgUsersUserIdMap.set(u.userId, { name: name, email: u.email });
+        });
+        await this.loadEvents(true);
+        this.loaded = true;
+    }
+
+    async loadEvents(clearExisting: boolean) {
+        if (this.refreshPromise != null || this.morePromise != null) {
+            return;
+        }
+
+        let dates: string[] = null;
+        try {
+            dates = this.eventService.formatDateFilters(this.start, this.end);
+        } catch (e) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('invalidDateRange'));
+            return;
+        }
+
+        this.loading = true;
+        let response: ListResponse<EventResponse>;
+        try {
+            const promise = this.apiService.getEventsOrganization(this.organizationId, dates[0], dates[1],
+                clearExisting ? null : this.continuationToken);
+            if (clearExisting) {
+                this.refreshPromise = promise;
+            } else {
+                this.morePromise = promise;
+            }
+            response = await promise;
+        } catch { }
+
+        this.continuationToken = response.continuationToken;
+        const events = response.data.map((r) => {
+            const userId = r.actingUserId == null ? r.userId : r.actingUserId;
+            const eventInfo = this.eventService.getEventInfo(r);
+            const user = userId != null && this.orgUsersUserIdMap.has(userId) ?
+                this.orgUsersUserIdMap.get(userId) : null;
+            return {
+                message: eventInfo.message,
+                appIcon: eventInfo.appIcon,
+                appName: eventInfo.appName,
+                userId: userId,
+                userName: user != null ? user.name : this.i18nService.t('unknown'),
+                userEmail: user != null ? user.email : '',
+                date: r.date,
+                ip: r.ipAddress,
+                type: r.type,
+            };
+        });
+
+        if (!clearExisting && this.events != null && this.events.length > 0) {
+            this.events = this.events.concat(events);
+        } else {
+            this.events = events;
+        }
+
+        this.loading = false;
+        this.morePromise = null;
+        this.refreshPromise = null;
+    }
+}

src/app/organizations/manage/group-add-edit.component.html

@@ -0,0 +1,102 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+            <div class="modal-header">
+                <h2 class="modal-title" id="groupAddEditTitle">{{title}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="loading">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body" *ngIf="!loading">
+                <div class="form-group">
+                    <label for="name">{{'name' | i18n}}</label>
+                    <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
+                </div>
+                <div class="form-group">
+                    <label for="externalId">{{'externalId' | i18n}}</label>
+                    <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId">
+                    <small class="form-text text-muted">{{'externalIdDesc' | i18n}}</small>
+                </div>
+                <h3 class="mt-4 d-flex">
+                    <div class="mb-2">
+                        {{'accessControl' | i18n}}
+                    </div>
+                    <div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
+                        <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
+                            {{'selectAll' | i18n}}
+                        </button>
+                        <button type="button" (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
+                            {{'unselectAll' | i18n}}
+                        </button>
+                    </div>
+                </h3>
+                <div class="form-group" [ngClass]="{'mb-0': access !== 'selected'}">
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" name="access" id="accessAll" value="all"
+                            [(ngModel)]="access">
+                        <label class="form-check-label" for="accessAll">
+                            {{'groupAccessAllItems' | i18n}}
+                        </label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" name="access" id="accessSelected" value="selected"
+                            [(ngModel)]="access">
+                        <label class="form-check-label" for="accessSelected">
+                            {{'groupAccessSelectedCollections' | i18n}}
+                        </label>
+                    </div>
+                </div>
+                <ng-container *ngIf="access === 'selected'">
+                    <div *ngIf="!collections || !collections.length">
+                        {{'noCollectionsInList' | i18n}}
+                    </div>
+                    <table class="table table-hover table-list mb-0" *ngIf="collections && collections.length">
+                        <thead>
+                            <tr>
+                                <th>&nbsp;</th>
+                                <th>{{'name' | i18n}}</th>
+                                <th width="100" class="text-center">{{'readOnly' | i18n}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let c of collections; let i = index">
+                                <td class="table-list-checkbox" (click)="check(c)">
+                                    <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked"
+                                        appStopProp>
+                                </td>
+                                <td (click)="check(c)">
+                                    {{c.name}}
+                                </td>
+                                <td class="text-center">
+                                    <input type="checkbox" [(ngModel)]="c.readOnly" name="Collection[{{i}}].ReadOnly"
+                                        [disabled]="!c.checked">
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </ng-container>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
+                <div class="ml-auto">
+                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" aria-hidden="true"
+                            title="{{'loading' | i18n}}"></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

src/app/organizations/manage/group-add-edit.component.ts

@@ -0,0 +1,139 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CollectionService } from 'jslib/abstractions/collection.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { CollectionData } from 'jslib/models/data/collectionData';
+import { Collection } from 'jslib/models/domain/collection';
+import { GroupRequest } from 'jslib/models/request/groupRequest';
+import { SelectionReadOnlyRequest } from 'jslib/models/request/selectionReadOnlyRequest';
+import { CollectionDetailsResponse } from 'jslib/models/response/collectionResponse';
+import { CollectionView } from 'jslib/models/view/collectionView';
+
+@Component({
+    selector: 'app-group-add-edit',
+    templateUrl: 'group-add-edit.component.html',
+})
+export class GroupAddEditComponent implements OnInit {
+    @Input() groupId: string;
+    @Input() organizationId: string;
+    @Output() onSavedGroup = new EventEmitter();
+    @Output() onDeletedGroup = new EventEmitter();
+
+    loading = true;
+    editMode: boolean = false;
+    title: string;
+    name: string;
+    externalId: string;
+    access: 'all' | 'selected' = 'selected';
+    collections: CollectionView[] = [];
+    formPromise: Promise<any>;
+    deletePromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private collectionService: CollectionService, private platformUtilsService: PlatformUtilsService) { }
+
+    async ngOnInit() {
+        this.editMode = this.loading = this.groupId != null;
+        await this.loadCollections();
+
+        if (this.editMode) {
+            this.editMode = true;
+            this.title = this.i18nService.t('editGroup');
+            try {
+                const group = await this.apiService.getGroupDetails(this.organizationId, this.groupId);
+                this.access = group.accessAll ? 'all' : 'selected';
+                this.name = group.name;
+                this.externalId = group.externalId;
+                if (group.collections != null && this.collections != null) {
+                    group.collections.forEach((s) => {
+                        const collection = this.collections.filter((c) => c.id === s.id);
+                        if (collection != null && collection.length > 0) {
+                            (collection[0] as any).checked = true;
+                            collection[0].readOnly = s.readOnly;
+                        }
+                    });
+                }
+            } catch { }
+        } else {
+            this.title = this.i18nService.t('addGroup');
+        }
+
+        this.loading = false;
+    }
+
+    async loadCollections() {
+        const response = await this.apiService.getCollections(this.organizationId);
+        const collections = response.data.map((r) =>
+            new Collection(new CollectionData(r as CollectionDetailsResponse)));
+        this.collections = await this.collectionService.decryptMany(collections);
+    }
+
+    check(c: CollectionView, select?: boolean) {
+        (c as any).checked = select == null ? !(c as any).checked : select;
+        if (!(c as any).checked) {
+            c.readOnly = false;
+        }
+    }
+
+    selectAll(select: boolean) {
+        this.collections.forEach((c) => this.check(c, select));
+    }
+
+    async submit() {
+        const request = new GroupRequest();
+        request.name = this.name;
+        request.externalId = this.externalId;
+        request.accessAll = this.access === 'all';
+        if (!request.accessAll) {
+            request.collections = this.collections.filter((c) => (c as any).checked)
+                .map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly));
+        }
+
+        try {
+            if (this.editMode) {
+                this.formPromise = this.apiService.putGroup(this.organizationId, this.groupId, request);
+            } else {
+                this.formPromise = this.apiService.postGroup(this.organizationId, request);
+            }
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Group' : 'Created Group' });
+            this.toasterService.popAsync('success', null,
+                this.i18nService.t(this.editMode ? 'editedGroupId' : 'createdGroupId', this.name));
+            this.onSavedGroup.emit();
+        } catch { }
+    }
+
+    async delete() {
+        if (!this.editMode) {
+            return;
+        }
+
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('deleteGroupConfirmation'), this.name,
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            this.deletePromise = this.apiService.deleteGroup(this.organizationId, this.groupId);
+            await this.deletePromise;
+            this.analytics.eventTrack.next({ action: 'Deleted Group' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('deletedGroupId', this.name));
+            this.onDeletedGroup.emit();
+        } catch { }
+    }
+}

src/app/organizations/manage/groups.component.html

@@ -0,0 +1,50 @@
+<div class="page-header d-flex">
+    <h1>{{'groups' | i18n}}</h1>
+    <div class="ml-auto d-flex">
+        <div>
+            <label class="sr-only" for="search">{{'search' | i18n}}</label>
+            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
+                [(ngModel)]="searchText">
+        </div>
+        <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
+            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+            {{'newGroup' | i18n}}
+        </button>
+    </div>
+</div>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<ng-container *ngIf="!loading && (groups | search:searchText:'name':'id') as searchedGroups">
+    <p *ngIf="!searchedGroups.length">{{'noGroupsInList' | i18n}}</p>
+    <table class="table table-hover table-list" *ngIf="searchedGroups.length">
+        <tbody>
+            <tr *ngFor="let g of searchedGroups">
+                <td>
+                    <a href="#" appStopClick (click)="edit(g)">{{g.name}}</a>
+                </td>
+                <td class="table-list-options">
+                    <div class="dropdown" appListDropdown>
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false" appA11yTitle="{{'options' | i18n}}">
+                            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            <a class="dropdown-item" href="#" appStopClick (click)="users(g)">
+                                <i class="fa fa-fw fa-users" aria-hidden="true"></i>
+                                {{'users' | i18n}}
+                            </a>
+                            <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(g)">
+                                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                                {{'delete' | i18n}}
+                            </a>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</ng-container>
+<ng-template #addEdit></ng-template>
+<ng-template #usersTemplate></ng-template>

src/app/organizations/manage/groups.component.ts

@@ -0,0 +1,151 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    OnInit,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { GroupResponse } from 'jslib/models/response/groupResponse';
+
+import { Utils } from 'jslib/misc/utils';
+
+import { ModalComponent } from '../../modal.component';
+import { EntityUsersComponent } from './entity-users.component';
+import { GroupAddEditComponent } from './group-add-edit.component';
+
+@Component({
+    selector: 'app-org-groups',
+    templateUrl: 'groups.component.html',
+})
+export class GroupsComponent implements OnInit {
+    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
+    @ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
+
+    loading = true;
+    organizationId: string;
+    groups: GroupResponse[];
+    searchText: string;
+
+    private modal: ModalComponent = null;
+
+    constructor(private apiService: ApiService, private route: ActivatedRoute,
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private platformUtilsService: PlatformUtilsService, private userService: UserService,
+        private router: Router) { }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            const organization = await this.userService.getOrganization(this.organizationId);
+            if (organization == null || !organization.useGroups) {
+                this.router.navigate(['/organizations', this.organizationId]);
+                return;
+            }
+            await this.load();
+            const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
+                this.searchText = qParams.search;
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
+            });
+        });
+    }
+
+    async load() {
+        const response = await this.apiService.getGroups(this.organizationId);
+        const groups = response.data != null && response.data.length > 0 ? response.data : [];
+        groups.sort(Utils.getSortFunction(this.i18nService, 'name'));
+        this.groups = groups;
+        this.loading = false;
+    }
+
+    edit(group: GroupResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<GroupAddEditComponent>(
+            GroupAddEditComponent, this.addEditModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.groupId = group != null ? group.id : null;
+        childComponent.onSavedGroup.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+        childComponent.onDeletedGroup.subscribe(() => {
+            this.modal.close();
+            this.removeGroup(group);
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    add() {
+        this.edit(null);
+    }
+
+    async delete(group: GroupResponse) {
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('deleteGroupConfirmation'), group.name,
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            await this.apiService.deleteGroup(this.organizationId, group.id);
+            this.analytics.eventTrack.next({ action: 'Deleted Group' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('deletedGroupId', group.name));
+            this.removeGroup(group);
+        } catch { }
+    }
+
+    users(group: GroupResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.usersModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EntityUsersComponent>(
+            EntityUsersComponent, this.usersModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.entity = 'group';
+        childComponent.entityId = group.id;
+        childComponent.entityName = group.name;
+
+        childComponent.onEditedUsers.subscribe(() => {
+            this.modal.close();
+        });
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    private removeGroup(group: GroupResponse) {
+        const index = this.groups.indexOf(group);
+        if (index > -1) {
+            this.groups.splice(index, 1);
+        }
+    }
+}

src/app/organizations/manage/manage.component.html

@@ -0,0 +1,33 @@
+<div class="container page-content">
+    <div class="row">
+        <div class="col-3">
+            <div class="card" *ngIf="organization">
+                <div class="card-header">{{'manage' | i18n}}</div>
+                <div class="list-group list-group-flush">
+                    <a routerLink="people" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.isAdmin">
+                        {{'people' | i18n}}
+                    </a>
+                    <a routerLink="collections" class="list-group-item" routerLinkActive="active">
+                        {{'collections' | i18n}}
+                    </a>
+                    <a routerLink="groups" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.isAdmin && accessGroups">
+                        {{'groups' | i18n}}
+                    </a>
+                    <a routerLink="policies" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.isAdmin && accessPolicies">
+                        {{'policies' | i18n}}
+                    </a>
+                    <a routerLink="events" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.isAdmin && accessEvents">
+                        {{'eventLogs' | i18n}}
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-9">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>

src/app/organizations/manage/manage.component.ts

@@ -0,0 +1,31 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { Organization } from 'jslib/models/domain/organization';
+
+@Component({
+    selector: 'app-org-manage',
+    templateUrl: 'manage.component.html',
+})
+export class ManageComponent implements OnInit {
+    organization: Organization;
+    accessPolicies = false;
+    accessGroups = false;
+    accessEvents = false;
+
+    constructor(private route: ActivatedRoute, private userService: UserService) { }
+
+    ngOnInit() {
+        this.route.parent.params.subscribe(async (params) => {
+            this.organization = await this.userService.getOrganization(params.organizationId);
+            this.accessPolicies = this.organization.usePolicies;
+            this.accessEvents = this.organization.useEvents;
+            this.accessGroups = this.organization.useGroups;
+        });
+    }
+}

src/app/organizations/manage/people.component.html

@@ -0,0 +1,113 @@
+<div class="page-header d-flex">
+    <h1>{{'people' | i18n}}</h1>
+    <div class="ml-auto d-flex">
+        <div class="btn-group btn-group-sm" role="group">
+            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == null}"
+                (click)="filter(null)">
+                {{'all' | i18n}}
+                <span class="badge badge-pill badge-info" *ngIf="allCount">{{allCount}}</span>
+            </button>
+            <button type="button" class="btn btn-outline-secondary"
+                [ngClass]="{active: status == organizationUserStatusType.Invited}"
+                (click)="filter(organizationUserStatusType.Invited)">
+                {{'invited' | i18n}}
+                <span class="badge badge-pill badge-info" *ngIf="invitedCount">{{invitedCount}}</span>
+            </button>
+            <button type="button" class="btn btn-outline-secondary"
+                [ngClass]="{active: status == organizationUserStatusType.Accepted}"
+                (click)="filter(organizationUserStatusType.Accepted)">
+                {{'accepted' | i18n}}
+                <span class="badge badge-pill badge-warning" *ngIf="acceptedCount">{{acceptedCount}}</span>
+            </button>
+        </div>
+        <div class="ml-3">
+            <label class="sr-only" for="search">{{'search' | i18n}}</label>
+            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
+                [(ngModel)]="searchText">
+        </div>
+        <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
+            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+            {{'inviteUser' | i18n}}
+        </button>
+    </div>
+</div>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<ng-container *ngIf="!loading && (users | search:searchText:'name':'email':'id') as searchedUsers">
+    <p *ngIf="!searchedUsers.length">{{'noUsersInList' | i18n}}</p>
+    <ng-container *ngIf="searchedUsers.length">
+        <app-callout type="info" title="{{'confirmUsers' | i18n}}" icon="fa-check-circle" *ngIf="showConfirmUsers">
+            {{'usersNeedConfirmed' | i18n}}
+        </app-callout>
+        <table class="table table-hover table-list">
+            <tbody>
+                <tr *ngFor="let u of searchedUsers">
+                    <td width="30">
+                        <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
+                            [fontSize]="14"></app-avatar>
+                    </td>
+                    <td>
+                        <a href="#" appStopClick (click)="edit(u)">{{u.email}}</a>
+                        <span class="badge badge-secondary"
+                            *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' | i18n}}</span>
+                        <span class="badge badge-warning"
+                            *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' | i18n}}</span>
+                        <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
+                    </td>
+                    <td>
+                        <ng-container *ngIf="u.twoFactorEnabled">
+                            <i class="fa fa-lock" title="{{'userUsingTwoStep' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'userUsingTwoStep' | i18n}}</span>
+                        </ng-container>
+                    </td>
+                    <td>
+                        <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
+                        <span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
+                        <span *ngIf="u.type === organizationUserType.Manager">{{'manager' | i18n}}</span>
+                        <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
+                    </td>
+                    <td class="table-list-options">
+                        <div class="dropdown" appListDropdown>
+                            <button class="btn btn-outline-secondary dropdown-toggle" type="button"
+                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                                appA11yTitle="{{'options' | i18n}}">
+                                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                            </button>
+                            <div class="dropdown-menu dropdown-menu-right">
+                                <a class="dropdown-item" href="#" appStopClick (click)="reinvite(u)"
+                                    *ngIf="u.status === organizationUserStatusType.Invited">
+                                    <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+                                    {{'resendInvitation' | i18n}}
+                                </a>
+                                <a class="dropdown-item text-success" href="#" appStopClick (click)="confirm(u)"
+                                    *ngIf="u.status === organizationUserStatusType.Accepted">
+                                    <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+                                    {{'confirm' | i18n}}
+                                </a>
+                                <a class="dropdown-item" href="#" appStopClick (click)="groups(u)" *ngIf="accessGroups">
+                                    <i class="fa fa-fw fa-sitemap" aria-hidden="true"></i>
+                                    {{'groups' | i18n}}
+                                </a>
+                                <a class="dropdown-item" href="#" appStopClick (click)="events(u)"
+                                    *ngIf="accessEvents && u.status === organizationUserStatusType.Confirmed">
+                                    <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
+                                    {{'eventLogs' | i18n}}
+                                </a>
+                                <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
+                                    <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                                    {{'remove' | i18n}}
+                                </a>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </ng-container>
+</ng-container>
+<ng-template #addEdit></ng-template>
+<ng-template #groupsTemplate></ng-template>
+<ng-template #eventsTemplate></ng-template>
+<ng-template #confirmTemplate></ng-template>

src/app/organizations/manage/people.component.ts

@@ -0,0 +1,336 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    OnInit,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ConstantsService } from 'jslib/services/constants.service';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { OrganizationUserConfirmRequest } from 'jslib/models/request/organizationUserConfirmRequest';
+
+import { OrganizationUserUserDetailsResponse } from 'jslib/models/response/organizationUserResponse';
+
+import { OrganizationUserStatusType } from 'jslib/enums/organizationUserStatusType';
+import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+
+import { Utils } from 'jslib/misc/utils';
+
+import { ModalComponent } from '../../modal.component';
+import { EntityEventsComponent } from './entity-events.component';
+import { UserAddEditComponent } from './user-add-edit.component';
+import { UserConfirmComponent } from './user-confirm.component';
+import { UserGroupsComponent } from './user-groups.component';
+
+@Component({
+    selector: 'app-org-people',
+    templateUrl: 'people.component.html',
+})
+export class PeopleComponent implements OnInit {
+    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
+    @ViewChild('groupsTemplate', { read: ViewContainerRef }) groupsModalRef: ViewContainerRef;
+    @ViewChild('eventsTemplate', { read: ViewContainerRef }) eventsModalRef: ViewContainerRef;
+    @ViewChild('confirmTemplate', { read: ViewContainerRef }) confirmModalRef: ViewContainerRef;
+
+    loading = true;
+    organizationId: string;
+    users: OrganizationUserUserDetailsResponse[];
+    searchText: string;
+    status: OrganizationUserStatusType = null;
+    statusMap = new Map<OrganizationUserStatusType, OrganizationUserUserDetailsResponse[]>();
+    organizationUserType = OrganizationUserType;
+    organizationUserStatusType = OrganizationUserStatusType;
+    actionPromise: Promise<any>;
+    accessEvents = false;
+    accessGroups = false;
+
+    private modal: ModalComponent = null;
+    private allUsers: OrganizationUserUserDetailsResponse[];
+
+    constructor(private apiService: ApiService, private route: ActivatedRoute,
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private platformUtilsService: PlatformUtilsService, private analytics: Angulartics2,
+        private toasterService: ToasterService, private cryptoService: CryptoService,
+        private userService: UserService, private router: Router,
+        private storageService: StorageService) { }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            const organization = await this.userService.getOrganization(this.organizationId);
+            if (!organization.isAdmin) {
+                this.router.navigate(['../collections'], { relativeTo: this.route });
+                return;
+            }
+            this.accessEvents = organization.useEvents;
+            this.accessGroups = organization.useGroups;
+            await this.load();
+
+            const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
+                this.searchText = qParams.search;
+                if (qParams.viewEvents != null) {
+                    const user = this.users.filter((u) => u.id === qParams.viewEvents);
+                    if (user.length > 0 && user[0].status === OrganizationUserStatusType.Confirmed) {
+                        this.events(user[0]);
+                    }
+                }
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
+            });
+        });
+    }
+
+    async load() {
+        const response = await this.apiService.getOrganizationUsers(this.organizationId);
+        this.statusMap.clear();
+        this.allUsers = response.data != null && response.data.length > 0 ? response.data : [];
+        this.allUsers.sort(Utils.getSortFunction(this.i18nService, 'email'));
+        this.allUsers.forEach((u) => {
+            if (!this.statusMap.has(u.status)) {
+                this.statusMap.set(u.status, [u]);
+            } else {
+                this.statusMap.get(u.status).push(u);
+            }
+        });
+        this.filter(this.status);
+        this.loading = false;
+    }
+
+    filter(status: OrganizationUserStatusType) {
+        this.status = status;
+        if (this.status != null) {
+            this.users = this.statusMap.get(this.status);
+        } else {
+            this.users = this.allUsers;
+        }
+    }
+
+    get allCount() {
+        return this.allUsers != null ? this.allUsers.length : 0;
+    }
+
+    get invitedCount() {
+        return this.statusMap.has(OrganizationUserStatusType.Invited) ?
+            this.statusMap.get(OrganizationUserStatusType.Invited).length : 0;
+    }
+
+    get acceptedCount() {
+        return this.statusMap.has(OrganizationUserStatusType.Accepted) ?
+            this.statusMap.get(OrganizationUserStatusType.Accepted).length : 0;
+    }
+
+    get confirmedCount() {
+        return this.statusMap.has(OrganizationUserStatusType.Confirmed) ?
+            this.statusMap.get(OrganizationUserStatusType.Confirmed).length : 0;
+    }
+
+    get showConfirmUsers(): boolean {
+        return this.allUsers != null && this.statusMap != null && this.allUsers.length > 1 &&
+            this.confirmedCount > 0 && this.confirmedCount < 3 && this.acceptedCount > 0;
+    }
+
+    edit(user: OrganizationUserUserDetailsResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<UserAddEditComponent>(
+            UserAddEditComponent, this.addEditModalRef);
+
+        childComponent.name = user != null ? user.name || user.email : null;
+        childComponent.organizationId = this.organizationId;
+        childComponent.organizationUserId = user != null ? user.id : null;
+        childComponent.onSavedUser.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+        childComponent.onDeletedUser.subscribe(() => {
+            this.modal.close();
+            this.removeUser(user);
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    invite() {
+        this.edit(null);
+    }
+
+    groups(user: OrganizationUserUserDetailsResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.groupsModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<UserGroupsComponent>(
+            UserGroupsComponent, this.groupsModalRef);
+
+        childComponent.name = user != null ? user.name || user.email : null;
+        childComponent.organizationId = this.organizationId;
+        childComponent.organizationUserId = user != null ? user.id : null;
+        childComponent.onSavedUser.subscribe(() => {
+            this.modal.close();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    async remove(user: OrganizationUserUserDetailsResponse) {
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('removeUserConfirmation'), user.name || user.email,
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            await this.apiService.deleteOrganizationUser(this.organizationId, user.id);
+            this.analytics.eventTrack.next({ action: 'Deleted User' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', user.name || user.email));
+            this.removeUser(user);
+        } catch { }
+    }
+
+    async reinvite(user: OrganizationUserUserDetailsResponse) {
+        if (this.actionPromise != null) {
+            return;
+        }
+        this.actionPromise = this.apiService.postOrganizationUserReinvite(this.organizationId, user.id);
+        await this.actionPromise;
+        this.analytics.eventTrack.next({ action: 'Reinvited User' });
+        this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenReinvited', user.name || user.email));
+        this.actionPromise = null;
+    }
+
+    async confirm(user: OrganizationUserUserDetailsResponse) {
+        function updateUser(self: PeopleComponent) {
+            user.status = OrganizationUserStatusType.Confirmed;
+            const mapIndex = self.statusMap.get(OrganizationUserStatusType.Accepted).indexOf(user);
+            if (mapIndex > -1) {
+                self.statusMap.get(OrganizationUserStatusType.Accepted).splice(mapIndex, 1);
+                self.statusMap.get(OrganizationUserStatusType.Confirmed).push(user);
+            }
+        }
+
+        if (this.actionPromise != null) {
+            return;
+        }
+
+        const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
+        if (autoConfirm == null || !autoConfirm) {
+            if (this.modal != null) {
+                this.modal.close();
+            }
+
+            const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            this.modal = this.confirmModalRef.createComponent(factory).instance;
+            const childComponent = this.modal.show<UserConfirmComponent>(
+                UserConfirmComponent, this.confirmModalRef);
+
+            childComponent.name = user != null ? user.name || user.email : null;
+            childComponent.organizationId = this.organizationId;
+            childComponent.organizationUserId = user != null ? user.id : null;
+            childComponent.userId = user != null ? user.userId : null;
+            childComponent.onConfirmedUser.subscribe(() => {
+                this.modal.close();
+                updateUser(this);
+            });
+
+            this.modal.onClosed.subscribe(() => {
+                this.modal = null;
+            });
+            return;
+        }
+
+        this.actionPromise = this.doConfirmation(user);
+        await this.actionPromise;
+        updateUser(this);
+        this.analytics.eventTrack.next({ action: 'Confirmed User' });
+        this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', user.name || user.email));
+        this.actionPromise = null;
+    }
+
+    async events(user: OrganizationUserUserDetailsResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.eventsModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EntityEventsComponent>(
+            EntityEventsComponent, this.eventsModalRef);
+
+        childComponent.name = user.name || user.email;
+        childComponent.organizationId = this.organizationId;
+        childComponent.entityId = user.id;
+        childComponent.showUser = false;
+        childComponent.entity = 'user';
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    private async doConfirmation(user: OrganizationUserUserDetailsResponse) {
+        const orgKey = await this.cryptoService.getOrgKey(this.organizationId);
+        const publicKeyResponse = await this.apiService.getUserPublicKey(user.userId);
+        const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+        try {
+            // tslint:disable-next-line
+            console.log('User\'s fingerprint: ' +
+                (await this.cryptoService.getFingerprint(user.userId, publicKey.buffer)).join('-'));
+        } catch { }
+        const key = await this.cryptoService.rsaEncrypt(orgKey.key, publicKey.buffer);
+        const request = new OrganizationUserConfirmRequest();
+        request.key = key.encryptedString;
+        await this.apiService.postOrganizationUserConfirm(this.organizationId, user.id, request);
+    }
+
+    private removeUser(user: OrganizationUserUserDetailsResponse) {
+        let index = this.users.indexOf(user);
+        if (index > -1) {
+            this.users.splice(index, 1);
+        }
+        if (this.statusMap.has(OrganizationUserStatusType.Accepted)) {
+            index = this.statusMap.get(OrganizationUserStatusType.Accepted).indexOf(user);
+            if (index > -1) {
+                this.statusMap.get(OrganizationUserStatusType.Accepted).splice(index, 1);
+            }
+        }
+        if (this.statusMap.has(OrganizationUserStatusType.Invited)) {
+            index = this.statusMap.get(OrganizationUserStatusType.Invited).indexOf(user);
+            if (index > -1) {
+                this.statusMap.get(OrganizationUserStatusType.Invited).splice(index, 1);
+            }
+        }
+        if (this.statusMap.has(OrganizationUserStatusType.Confirmed)) {
+            index = this.statusMap.get(OrganizationUserStatusType.Confirmed).indexOf(user);
+            if (index > -1) {
+                this.statusMap.get(OrganizationUserStatusType.Confirmed).splice(index, 1);
+            }
+        }
+    }
+}

src/app/organizations/manage/policies.component.html

@@ -0,0 +1,19 @@
+<div class="page-header d-flex">
+    <h1>{{'policies' | i18n}}</h1>
+</div>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<table class="table table-hover table-list" *ngIf="!loading">
+    <tbody>
+        <tr *ngFor="let p of policies">
+            <td>
+                <a href="#" appStopClick (click)="edit(p)">{{p.name}}</a>
+                <span class="badge badge-success" *ngIf="p.enabled">{{'enabled' | i18n}}</span>
+                <small class="text-muted d-block">{{p.description}}</small>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<ng-template #editTemplate></ng-template>

src/app/organizations/manage/policies.component.ts

@@ -0,0 +1,114 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    OnInit,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { PolicyType } from 'jslib/enums/policyType';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { PolicyResponse } from 'jslib/models/response/policyResponse';
+
+import { ModalComponent } from '../../modal.component';
+
+import { PolicyEditComponent } from './policy-edit.component';
+
+@Component({
+    selector: 'app-org-policies',
+    templateUrl: 'policies.component.html',
+})
+export class PoliciesComponent implements OnInit {
+    @ViewChild('editTemplate', { read: ViewContainerRef }) editModalRef: ViewContainerRef;
+
+    loading = true;
+    organizationId: string;
+    policies: any[];
+
+    private modal: ModalComponent = null;
+    private orgPolicies: PolicyResponse[];
+    private policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
+
+    constructor(private apiService: ApiService, private route: ActivatedRoute,
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private platformUtilsService: PlatformUtilsService, private userService: UserService,
+        private router: Router) {
+        this.policies = [
+            {
+                name: i18nService.t('twoStepLogin'),
+                description: i18nService.t('twoStepLoginPolicyDesc'),
+                type: PolicyType.TwoFactorAuthentication,
+                enabled: false,
+            },
+            {
+                name: i18nService.t('masterPass'),
+                description: i18nService.t('masterPassPolicyDesc'),
+                type: PolicyType.MasterPassword,
+                enabled: false,
+            },
+            {
+                name: i18nService.t('passwordGenerator'),
+                description: i18nService.t('passwordGeneratorPolicyDesc'),
+                type: PolicyType.PasswordGenerator,
+                enabled: false,
+            },
+        ];
+    }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            const organization = await this.userService.getOrganization(this.organizationId);
+            if (organization == null || !organization.usePolicies) {
+                this.router.navigate(['/organizations', this.organizationId]);
+                return;
+            }
+            await this.load();
+        });
+    }
+
+    async load() {
+        const response = await this.apiService.getPolicies(this.organizationId);
+        this.orgPolicies = response.data != null && response.data.length > 0 ? response.data : [];
+        this.orgPolicies.forEach((op) => {
+            this.policiesEnabledMap.set(op.type, op.enabled);
+        });
+        this.policies.forEach((p) => {
+            p.enabled = this.policiesEnabledMap.has(p.type) && this.policiesEnabledMap.get(p.type);
+        });
+        this.loading = false;
+    }
+
+    edit(p: any) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.editModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<PolicyEditComponent>(
+            PolicyEditComponent, this.editModalRef);
+
+        childComponent.name = p.name;
+        childComponent.description = p.description;
+        childComponent.type = p.type;
+        childComponent.organizationId = this.organizationId;
+        childComponent.onSavedPolicy.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+}

src/app/organizations/manage/policy-edit.component.html

@@ -0,0 +1,143 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+            <div class="modal-header">
+                <h2 class="modal-title" id="policiesEditTitle">{{'editPolicy' | i18n}} - {{name}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="loading">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body" *ngIf="!loading">
+                <p>{{description}}</p>
+                <app-callout type="warning" *ngIf="type === policyType.TwoFactorAuthentication"
+                    title="{{'warning' | i18n}}" icon="fa-warning">
+                    {{'twoStepLoginPolicyWarning' | i18n}}
+                </app-callout>
+                <div class="form-group">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="enabled" [(ngModel)]="enabled"
+                            name="Enabled">
+                        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
+                    </div>
+                </div>
+                <ng-container *ngIf="type === policyType.MasterPassword">
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="masterPassMinComplexity">{{'minComplexityScore' | i18n}}</label>
+                            <select id="masterPassMinComplexity" name="MasterPassMinComplexity"
+                                [(ngModel)]="masterPassMinComplexity" class="form-control">
+                                <option *ngFor="let o of passwordScores" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="masterPassMinLength">{{'minLength' | i18n}}</label>
+                            <input id="masterPassMinLength" class="form-control" type="number" min="8"
+                                name="MasterPassMinLength" [(ngModel)]="masterPassMinLength">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireUpper"
+                            [(ngModel)]="masterPassRequireUpper" name="MasterPassRequireUpper">
+                        <label class="form-check-label" for="masterPassRequireUpper">A-Z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireLower"
+                            [(ngModel)]="masterPassRequireLower" name="MasterPassRequireLower">
+                        <label class="form-check-label" for="masterPassRequireLower">a-z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireNumbers"
+                            [(ngModel)]="masterPassRequireNumbers" name="MasterPassRequireNumbers">
+                        <label class="form-check-label" for="masterPassRequireNumbers">0-9</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireSpecial"
+                            [(ngModel)]="masterPassRequireSpecial" name="MasterPassRequireSpecial">
+                        <label class="form-check-label" for="masterPassRequireSpecial">!@#$%^&amp;*</label>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="type === policyType.PasswordGenerator">
+                    <div class="row">
+                        <div class="col-6 form-group  mb-0">
+                            <label for="passGenDefaultType">{{'defaultType' | i18n}}</label>
+                            <select id="passGenDefaultType" name="PassGenDefaultType" [(ngModel)]="passGenDefaultType"
+                                class="form-control">
+                                <option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                    </div>
+                    <h3 class="mt-4">{{'password' | i18n}}</h3>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinLength">{{'minLength' | i18n}}</label>
+                            <input id="passGenMinLength" class="form-control" type="number" name="PassGenMinLength"
+                                min="5" max="128" [(ngModel)]="passGenMinLength">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinNumbers">{{'minNumbers' | i18n}}</label>
+                            <input id="passGenMinNumbers" class="form-control" type="number" name="PassGenMinNumbers"
+                                min="0" max="9" [(ngModel)]="passGenMinNumbers">
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="passGenMinSpecial">{{'minSpecial' | i18n}}</label>
+                            <input id="passGenMinSpecial" class="form-control" type="number" name="PassGenMinSpecial"
+                                min="0" max="9" [(ngModel)]="passGenMinSpecial">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseUpper"
+                            [(ngModel)]="passGenUseUpper" name="PassGenUseUpper">
+                        <label class="form-check-label" for="passGenUseUpper">A-Z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseLower"
+                            [(ngModel)]="passGenUseLower" name="PassGenUseLower">
+                        <label class="form-check-label" for="passGenUseLower">a-z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseNumbers"
+                            [(ngModel)]="passGenUseNumbers" name="PassGenUseNumbers">
+                        <label class="form-check-label" for="passGenUseNumbers">0-9</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseSpecial"
+                            [(ngModel)]="passGenUseSpecial" name="PassGenUseSpecial">
+                        <label class="form-check-label" for="passGenUseSpecial">!@#$%^&amp;*</label>
+                    </div>
+                    <h3 class="mt-4">{{'passphrase' | i18n}}</h3>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinNumberWords">{{'minimumNumberOfWords' | i18n}}</label>
+                            <input id="passGenMinNumberWords" class="form-control" type="number"
+                                name="PassGenMinNumberWords" min="3" max="20" [(ngModel)]="passGenMinNumberWords">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenCapitalize"
+                            [(ngModel)]="passGenCapitalize" name="PassGenCapitalize">
+                        <label class="form-check-label" for="passGenCapitalize">{{'capitalize' | i18n}}</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenIncludeNumber"
+                            [(ngModel)]="passGenIncludeNumber" name="PassGenIncludeNumber">
+                        <label class="form-check-label" for="passGenIncludeNumber">{{'includeNumber' | i18n}}</label>
+                    </div>
+                </ng-container>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/organizations/manage/policy-edit.component.ts

@@ -0,0 +1,171 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { PolicyType } from 'jslib/enums/policyType';
+
+import { PolicyRequest } from 'jslib/models/request/policyRequest';
+
+import { PolicyResponse } from 'jslib/models/response/policyResponse';
+
+@Component({
+    selector: 'app-policy-edit',
+    templateUrl: 'policy-edit.component.html',
+})
+export class PolicyEditComponent implements OnInit {
+    @Input() name: string;
+    @Input() description: string;
+    @Input() type: PolicyType;
+    @Input() organizationId: string;
+    @Output() onSavedPolicy = new EventEmitter();
+
+    policyType = PolicyType;
+    loading = true;
+    enabled = false;
+    formPromise: Promise<any>;
+    passwordScores: any[];
+    defaultTypes: any[];
+
+    // Master password
+
+    masterPassMinComplexity?: number = null;
+    masterPassMinLength?: number;
+    masterPassRequireUpper?: number;
+    masterPassRequireLower?: number;
+    masterPassRequireNumbers?: number;
+    masterPassRequireSpecial?: number;
+
+    // Password generator
+
+    passGenDefaultType?: string;
+    passGenMinLength?: number;
+    passGenUseUpper?: boolean;
+    passGenUseLower?: boolean;
+    passGenUseNumbers?: boolean;
+    passGenUseSpecial?: boolean;
+    passGenMinNumbers?: number;
+    passGenMinSpecial?: number;
+    passGenMinNumberWords?: number;
+    passGenCapitalize?: boolean;
+    passGenIncludeNumber?: boolean;
+
+    private policy: PolicyResponse;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService) {
+        this.passwordScores = [
+            { name: '-- ' + i18nService.t('select') + ' --', value: null },
+            { name: i18nService.t('weak') + ' (0)', value: 0 },
+            { name: i18nService.t('weak') + ' (1)', value: 1 },
+            { name: i18nService.t('weak') + ' (2)', value: 2 },
+            { name: i18nService.t('good') + ' (3)', value: 3 },
+            { name: i18nService.t('strong') + ' (4)', value: 4 },
+        ];
+        this.defaultTypes = [
+            { name: i18nService.t('userPreference'), value: null },
+            { name: i18nService.t('password'), value: 'password' },
+            { name: i18nService.t('passphrase'), value: 'passphrase' },
+        ];
+    }
+
+    async ngOnInit() {
+        await this.load();
+        this.loading = false;
+    }
+
+    async load() {
+        try {
+            this.policy = await this.apiService.getPolicy(this.organizationId, this.type);
+
+            if (this.policy != null) {
+                this.enabled = this.policy.enabled;
+                if (this.policy.data != null) {
+                    switch (this.type) {
+                        case PolicyType.PasswordGenerator:
+                            this.passGenDefaultType = this.policy.data.defaultType;
+                            this.passGenMinLength = this.policy.data.minLength;
+                            this.passGenUseUpper = this.policy.data.useUpper;
+                            this.passGenUseLower = this.policy.data.useLower;
+                            this.passGenUseNumbers = this.policy.data.useNumbers;
+                            this.passGenUseSpecial = this.policy.data.useSpecial;
+                            this.passGenMinNumbers = this.policy.data.minNumbers;
+                            this.passGenMinSpecial = this.policy.data.minSpecial;
+                            this.passGenMinNumberWords = this.policy.data.minNumberWords;
+                            this.passGenCapitalize = this.policy.data.capitalize;
+                            this.passGenIncludeNumber = this.policy.data.includeNumber;
+                            break;
+                        case PolicyType.MasterPassword:
+                            this.masterPassMinComplexity = this.policy.data.minComplexity;
+                            this.masterPassMinLength = this.policy.data.minLength;
+                            this.masterPassRequireUpper = this.policy.data.requireUpper;
+                            this.masterPassRequireLower = this.policy.data.requireLower;
+                            this.masterPassRequireNumbers = this.policy.data.requireNumbers;
+                            this.masterPassRequireSpecial = this.policy.data.requireSpecial;
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            }
+        } catch (e) {
+            if (e.statusCode === 404) {
+                this.enabled = false;
+            } else {
+                throw e;
+            }
+        }
+    }
+
+    async submit() {
+        const request = new PolicyRequest();
+        request.enabled = this.enabled;
+        request.type = this.type;
+        request.data = null;
+        switch (this.type) {
+            case PolicyType.PasswordGenerator:
+                request.data = {
+                    defaultType: this.passGenDefaultType,
+                    minLength: this.passGenMinLength || null,
+                    useUpper: this.passGenUseUpper,
+                    useLower: this.passGenUseLower,
+                    useNumbers: this.passGenUseNumbers,
+                    useSpecial: this.passGenUseSpecial,
+                    minNumbers: this.passGenMinNumbers || null,
+                    minSpecial: this.passGenMinSpecial || null,
+                    minNumberWords: this.passGenMinNumberWords || null,
+                    capitalize: this.passGenCapitalize,
+                    includeNumber: this.passGenIncludeNumber,
+                };
+                break;
+            case PolicyType.MasterPassword:
+                request.data = {
+                    minComplexity: this.masterPassMinComplexity || null,
+                    minLength: this.masterPassMinLength || null,
+                    requireUpper: this.masterPassRequireUpper,
+                    requireLower: this.masterPassRequireLower,
+                    requireNumbers: this.masterPassRequireNumbers,
+                    requireSpecial: this.masterPassRequireSpecial,
+                };
+                break;
+            default:
+                break;
+        }
+        try {
+            this.formPromise = this.apiService.putPolicy(this.organizationId, this.type, request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Edited Policy' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('editedPolicyId', this.name));
+            this.onSavedPolicy.emit();
+        } catch { }
+    }
+}

src/app/organizations/manage/user-add-edit.component.html

@@ -0,0 +1,137 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
+    <div class="modal-dialog" [ngClass]="{'modal-lg': !editMode}" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+            <div class="modal-header">
+                <h2 class="modal-title" id="userAddEditTitle">
+                    {{title}}
+                    <small class="text-muted" *ngIf="name">{{name}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="loading">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body" *ngIf="!loading">
+                <ng-container *ngIf="!editMode">
+                    <p>{{'inviteUserDesc' | i18n}}</p>
+                    <div class="form-group mb-4">
+                        <label for="emails">{{'email' | i18n}}</label>
+                        <input id="emails" class="form-control" type="text" name="Emails" [(ngModel)]="emails" required>
+                        <small class="text-muted">{{'inviteMultipleEmailDesc' | i18n : '20'}}</small>
+                    </div>
+                </ng-container>
+                <h3>{{'userType' | i18n}}</h3>
+                <div class="form-check mt-2 form-check-block">
+                    <input class="form-check-input" type="radio" name="userType" id="userTypeUser"
+                        [value]="organizationUserType.User" [(ngModel)]="type">
+                    <label class="form-check-label" for="userTypeUser">
+                        {{'user' | i18n}}
+                        <small>{{'userDesc' | i18n}}</small>
+                    </label>
+                </div>
+                <div class="form-check mt-2 form-check-block">
+                    <input class="form-check-input" type="radio" name="userType" id="userTypeManager"
+                        [value]="organizationUserType.Manager" [(ngModel)]="type">
+                    <label class="form-check-label" for="userTypeManager">
+                        {{'manager' | i18n}}
+                        <small>{{'managerDesc' | i18n}}</small>
+                    </label>
+                </div>
+                <div class="form-check mt-2 form-check-block">
+                    <input class="form-check-input" type="radio" name="userType" id="userTypeAdmin"
+                        [value]="organizationUserType.Admin" [(ngModel)]="type">
+                    <label class="form-check-label" for="userTypeAdmin">
+                        {{'admin' | i18n}}
+                        <small>{{'adminDesc' | i18n}}</small>
+                    </label>
+                </div>
+                <div class="form-check mt-2 form-check-block">
+                    <input class="form-check-input" type="radio" name="userType" id="userTypeOwner"
+                        [value]="organizationUserType.Owner" [(ngModel)]="type">
+                    <label class="form-check-label" for="userTypeOwner">
+                        {{'owner' | i18n}}
+                        <small>{{'ownerDesc' | i18n}}</small>
+                    </label>
+                </div>
+                <h3 class="mt-4 d-flex">
+                    <div class="mb-2">
+                        {{'accessControl' | i18n}}
+                    </div>
+                    <div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
+                        <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
+                            {{'selectAll' | i18n}}
+                        </button>
+                        <button type="button" (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
+                            {{'unselectAll' | i18n}}
+                        </button>
+                    </div>
+                </h3>
+                <div class="form-group" [ngClass]="{'mb-0': access !== 'selected'}">
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" name="access" id="accessAll" value="all"
+                            [(ngModel)]="access">
+                        <label class="form-check-label" for="accessAll">
+                            {{'userAccessAllItems' | i18n}}
+                        </label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" name="access" id="accessSelected" value="selected"
+                            [(ngModel)]="access">
+                        <label class="form-check-label" for="accessSelected">
+                            {{'userAccessSelectedCollections' | i18n}}
+                        </label>
+                    </div>
+                </div>
+                <ng-container *ngIf="access === 'selected'">
+                    <div *ngIf="!collections || !collections.length">
+                        {{'noCollectionsInList' | i18n}}
+                    </div>
+                    <table class="table table-hover table-list mb-0" *ngIf="collections && collections.length">
+                        <thead>
+                            <tr>
+                                <th>&nbsp;</th>
+                                <th>{{'name' | i18n}}</th>
+                                <th width="100" class="text-center">{{'readOnly' | i18n}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let c of collections; let i = index">
+                                <td class="table-list-checkbox" (click)="check(c)">
+                                    <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked"
+                                        appStopProp>
+                                </td>
+                                <td (click)="check(c)">
+                                    {{c.name}}
+                                </td>
+                                <td class="text-center">
+                                    <input type="checkbox" [(ngModel)]="c.readOnly" name="Collection[{{i}}].ReadOnly"
+                                        [disabled]="!c.checked">
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </ng-container>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
+                <div class="ml-auto">
+                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

src/app/organizations/manage/user-add-edit.component.ts

@@ -0,0 +1,150 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CollectionService } from 'jslib/abstractions/collection.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { CollectionData } from 'jslib/models/data/collectionData';
+import { Collection } from 'jslib/models/domain/collection';
+import { OrganizationUserInviteRequest } from 'jslib/models/request/organizationUserInviteRequest';
+import { OrganizationUserUpdateRequest } from 'jslib/models/request/organizationUserUpdateRequest';
+import { SelectionReadOnlyRequest } from 'jslib/models/request/selectionReadOnlyRequest';
+import { CollectionDetailsResponse } from 'jslib/models/response/collectionResponse';
+import { CollectionView } from 'jslib/models/view/collectionView';
+
+import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+
+@Component({
+    selector: 'app-user-add-edit',
+    templateUrl: 'user-add-edit.component.html',
+})
+export class UserAddEditComponent implements OnInit {
+    @Input() name: string;
+    @Input() organizationUserId: string;
+    @Input() organizationId: string;
+    @Output() onSavedUser = new EventEmitter();
+    @Output() onDeletedUser = new EventEmitter();
+
+    loading = true;
+    editMode: boolean = false;
+    title: string;
+    emails: string;
+    type: OrganizationUserType = OrganizationUserType.User;
+    access: 'all' | 'selected' = 'selected';
+    collections: CollectionView[] = [];
+    formPromise: Promise<any>;
+    deletePromise: Promise<any>;
+    organizationUserType = OrganizationUserType;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private collectionService: CollectionService, private platformUtilsService: PlatformUtilsService) { }
+
+    async ngOnInit() {
+        this.editMode = this.loading = this.organizationUserId != null;
+        await this.loadCollections();
+
+        if (this.editMode) {
+            this.editMode = true;
+            this.title = this.i18nService.t('editUser');
+            try {
+                const user = await this.apiService.getOrganizationUser(this.organizationId, this.organizationUserId);
+                this.access = user.accessAll ? 'all' : 'selected';
+                this.type = user.type;
+                if (user.collections != null && this.collections != null) {
+                    user.collections.forEach((s) => {
+                        const collection = this.collections.filter((c) => c.id === s.id);
+                        if (collection != null && collection.length > 0) {
+                            (collection[0] as any).checked = true;
+                            collection[0].readOnly = s.readOnly;
+                        }
+                    });
+                }
+            } catch { }
+        } else {
+            this.title = this.i18nService.t('inviteUser');
+        }
+
+        this.loading = false;
+    }
+
+    async loadCollections() {
+        const response = await this.apiService.getCollections(this.organizationId);
+        const collections = response.data.map((r) =>
+            new Collection(new CollectionData(r as CollectionDetailsResponse)));
+        this.collections = await this.collectionService.decryptMany(collections);
+    }
+
+    check(c: CollectionView, select?: boolean) {
+        (c as any).checked = select == null ? !(c as any).checked : select;
+        if (!(c as any).checked) {
+            c.readOnly = false;
+        }
+    }
+
+    selectAll(select: boolean) {
+        this.collections.forEach((c) => this.check(c, select));
+    }
+
+    async submit() {
+        let collections: SelectionReadOnlyRequest[] = null;
+        if (this.access !== 'all') {
+            collections = this.collections.filter((c) => (c as any).checked)
+                .map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly));
+        }
+
+        try {
+            if (this.editMode) {
+                const request = new OrganizationUserUpdateRequest();
+                request.accessAll = this.access === 'all';
+                request.type = this.type;
+                request.collections = collections;
+                this.formPromise = this.apiService.putOrganizationUser(this.organizationId, this.organizationUserId,
+                    request);
+            } else {
+                const request = new OrganizationUserInviteRequest();
+                request.emails = this.emails.trim().split(/\s*,\s*/);
+                request.accessAll = this.access === 'all';
+                request.type = this.type;
+                request.collections = collections;
+                this.formPromise = this.apiService.postOrganizationUserInvite(this.organizationId, request);
+            }
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: this.editMode ? 'Edited User' : 'Invited User' });
+            this.toasterService.popAsync('success', null,
+                this.i18nService.t(this.editMode ? 'editedUserId' : 'invitedUsers', this.name));
+            this.onSavedUser.emit();
+        } catch { }
+    }
+
+    async delete() {
+        if (!this.editMode) {
+            return;
+        }
+
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('removeUserConfirmation'), this.name,
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            this.deletePromise = this.apiService.deleteOrganizationUser(this.organizationId, this.organizationUserId);
+            await this.deletePromise;
+            this.analytics.eventTrack.next({ action: 'Deleted User' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', this.name));
+            this.onDeletedUser.emit();
+        } catch { }
+    }
+}

src/app/organizations/manage/user-confirm.component.html

@@ -0,0 +1,38 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+            <div class="modal-header">
+                <h2 class="modal-title" id="confirmUserTitle">
+                    {{'confirmUser' | i18n}}
+                    <small class="text-muted" *ngIf="name">{{name}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>
+                    {{'fingerprintEnsureIntegrityVerify' | i18n}}
+                    <a href="https://help.bitwarden.com/article/fingerprint-phrase/" target="_blank" rel="noopener">
+                        {{'learnMore' | i18n}}</a>
+                </p>
+                <p><code>{{fingerprint}}</code></p>
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" id="dontAskAgain" name="DontAskAgain"
+                        [(ngModel)]="dontAskAgain">
+                    <label class="form-check-label" for="dontAskAgain">
+                        {{'dontAskFingerprintAgain' | i18n}}
+                    </label>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'confirm' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/organizations/manage/user-confirm.component.ts

@@ -0,0 +1,84 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ConstantsService } from 'jslib/services/constants.service';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+
+import { OrganizationUserConfirmRequest } from 'jslib/models/request/organizationUserConfirmRequest';
+
+import { Utils } from 'jslib/misc/utils';
+
+@Component({
+    selector: 'app-user-confirm',
+    templateUrl: 'user-confirm.component.html',
+})
+export class UserConfirmComponent implements OnInit {
+    @Input() name: string;
+    @Input() userId: string;
+    @Input() organizationUserId: string;
+    @Input() organizationId: string;
+    @Output() onConfirmedUser = new EventEmitter();
+
+    dontAskAgain = false;
+    loading = true;
+    fingerprint: string;
+    formPromise: Promise<any>;
+
+    private publicKey: Uint8Array = null;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private cryptoService: CryptoService, private storageService: StorageService) { }
+
+    async ngOnInit() {
+        try {
+            const publicKeyResponse = await this.apiService.getUserPublicKey(this.userId);
+            if (publicKeyResponse != null) {
+                this.publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+                const fingerprint = await this.cryptoService.getFingerprint(this.userId, this.publicKey.buffer);
+                if (fingerprint != null) {
+                    this.fingerprint = fingerprint.join('-');
+                }
+            }
+        } catch { }
+        this.loading = false;
+    }
+
+    async submit() {
+        if (this.loading) {
+            return;
+        }
+
+        if (this.dontAskAgain) {
+            await this.storageService.save(ConstantsService.autoConfirmFingerprints, true);
+        }
+
+        try {
+            this.formPromise = this.doConfirmation();
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Confirmed User' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', this.name));
+            this.onConfirmedUser.emit();
+        } catch { }
+    }
+
+    private async doConfirmation() {
+        const orgKey = await this.cryptoService.getOrgKey(this.organizationId);
+        const key = await this.cryptoService.rsaEncrypt(orgKey.key, this.publicKey.buffer);
+        const request = new OrganizationUserConfirmRequest();
+        request.key = key.encryptedString;
+        await this.apiService.postOrganizationUserConfirm(this.organizationId, this.organizationUserId, request);
+    }
+}

src/app/organizations/manage/user-groups.component.html

@@ -0,0 +1,45 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAccessTitle">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+            <div class="modal-header">
+                <h2 class="modal-title" id="groupAccessTitle">
+                    {{'groupAccess' | i18n}}
+                    <small class="text-muted" *ngIf="name">{{name}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="loading">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body" *ngIf="!loading">
+                <p>{{'groupAccessUserDesc' | i18n}}</p>
+                <div *ngIf="!groups || !groups.length">
+                    {{'noGroupsInList' | i18n}}
+                </div>
+                <table class="table table-hover table-list mb-0" *ngIf="groups && groups.length">
+                    <tbody>
+                        <tr *ngFor="let g of groups; let i = index">
+                            <td class="table-list-checkbox" (click)="check(g)">
+                                <input type="checkbox" [(ngModel)]="g.checked" name="Groups[{{i}}].Checked" appStopProp>
+                            </td>
+                            <td (click)="check(g)">
+                                {{g.name}}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/organizations/manage/user-groups.component.ts

@@ -0,0 +1,83 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { OrganizationUserUpdateGroupsRequest } from 'jslib/models/request/organizationUserUpdateGroupsRequest';
+import { GroupResponse } from 'jslib/models/response/groupResponse';
+
+import { Utils } from 'jslib/misc/utils';
+
+@Component({
+    selector: 'app-user-groups',
+    templateUrl: 'user-groups.component.html',
+})
+export class UserGroupsComponent implements OnInit {
+    @Input() name: string;
+    @Input() organizationUserId: string;
+    @Input() organizationId: string;
+    @Output() onSavedUser = new EventEmitter();
+
+    loading = true;
+    groups: GroupResponse[] = [];
+    formPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService) { }
+
+    async ngOnInit() {
+        const groupsResponse = await this.apiService.getGroups(this.organizationId);
+        const groups = groupsResponse.data.map((r) => r);
+        groups.sort(Utils.getSortFunction(this.i18nService, 'name'));
+        this.groups = groups;
+
+        try {
+            const userGroups = await this.apiService.getOrganizationUserGroups(
+                this.organizationId, this.organizationUserId);
+            if (userGroups != null && this.groups != null) {
+                userGroups.forEach((ug) => {
+                    const group = this.groups.filter((g) => g.id === ug);
+                    if (group != null && group.length > 0) {
+                        (group[0] as any).checked = true;
+                    }
+                });
+            }
+        } catch { }
+
+        this.loading = false;
+    }
+
+    check(g: GroupResponse, select?: boolean) {
+        (g as any).checked = select == null ? !(g as any).checked : select;
+        if (!(g as any).checked) {
+            (g as any).readOnly = false;
+        }
+    }
+
+    selectAll(select: boolean) {
+        this.groups.forEach((g) => this.check(g, select));
+    }
+
+    async submit() {
+        const request = new OrganizationUserUpdateGroupsRequest();
+        request.groupIds = this.groups.filter((g) => (g as any).checked).map((g) => g.id);
+
+        try {
+            this.formPromise = this.apiService.putOrganizationUserGroups(this.organizationId, this.organizationUserId,
+                request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Edited User Groups' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('editedGroupsForUser', this.name));
+            this.onSavedUser.emit();
+        } catch { }
+    }
+}

src/app/organizations/settings/account.component.html

@@ -0,0 +1,69 @@
+<div class="page-header">
+    <h1>{{'myOrganization' | i18n}}</h1>
+</div>
+<div *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</div>
+<form *ngIf="org && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="row">
+        <div class="col-6">
+            <div class="form-group">
+                <label for="name">{{'organizationName' | i18n}}</label>
+                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="org.name">
+            </div>
+            <div class="form-group">
+                <label for="billingEmail">{{'billingEmail' | i18n}}</label>
+                <input id="billingEmail" class="form-control" type="text" name="BillingEmail"
+                    [(ngModel)]="org.billingEmail">
+            </div>
+            <div class="form-group">
+                <label for="businessName">{{'businessName' | i18n}}</label>
+                <input id="businessName" class="form-control" type="text" name="BusinessName"
+                    [(ngModel)]="org.businessName">
+            </div>
+        </div>
+        <div class="col-6">
+            <app-avatar data="{{org.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
+        </div>
+    </div>
+    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+        <span>{{'save' | i18n}}</span>
+    </button>
+</form>
+<ng-container *ngIf="canUseApi">
+    <div class="secondary-header border-0 mb-0">
+        <h1>{{'apiKey' | i18n}}</h1>
+    </div>
+    <p>
+        {{'apiKeyDesc' | i18n}}
+        <a href="https://docs.bitwarden.com" target="_blank" rel="noopener">
+            {{'learnMore' | i18n}}
+        </a>
+    </p>
+    <button type="button" class="btn btn-outline-secondary" (click)="viewApiKey()">{{'viewApiKey' | i18n}}</button>
+    <button type="button" class="btn btn-outline-secondary" (click)="rotateApiKey()">{{'rotateApiKey' | i18n}}</button>
+</ng-container>
+<div class="secondary-header border-0 mb-0">
+    <h1>{{'taxInformation' | i18n}}</h1>
+</div>
+<p>{{'taxInformationDesc' | i18n}}</p>
+<a href="https://bitwarden.com/contact/" target="_blank" rel="noopener" class="btn btn-outline-secondary">
+    {{'contactSupport' | i18n}}
+</a>
+<div class="secondary-header text-danger border-0 mb-0">
+    <h1>{{'dangerZone' | i18n}}</h1>
+</div>
+<div class="card border-danger">
+    <div class="card-body">
+        <p>{{'dangerZoneDesc' | i18n}}</p>
+        <button type="button" class="btn btn-outline-danger"
+            (click)="deleteOrganization()">{{'deleteOrganization' | i18n}}</button>
+        <button type="button" class="btn btn-outline-danger" (click)="purgeVault()">{{'purgeVault' | i18n}}</button>
+    </div>
+</div>
+<ng-template #deleteOrganizationTemplate></ng-template>
+<ng-template #purgeOrganizationTemplate></ng-template>
+<ng-template #apiKeyTemplate></ng-template>
+<ng-template #rotateApiKeyTemplate></ng-template>

src/app/organizations/settings/account.component.ts

@@ -0,0 +1,134 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { SyncService } from 'jslib/abstractions/sync.service';
+
+import { OrganizationUpdateRequest } from 'jslib/models/request/organizationUpdateRequest';
+import { OrganizationResponse } from 'jslib/models/response/organizationResponse';
+
+import { ModalComponent } from '../../modal.component';
+import { PurgeVaultComponent } from '../../settings/purge-vault.component';
+import { ApiKeyComponent } from './api-key.component';
+import { DeleteOrganizationComponent } from './delete-organization.component';
+import { RotateApiKeyComponent } from './rotate-api-key.component';
+
+@Component({
+    selector: 'app-org-account',
+    templateUrl: 'account.component.html',
+})
+export class AccountComponent {
+    @ViewChild('deleteOrganizationTemplate', { read: ViewContainerRef }) deleteModalRef: ViewContainerRef;
+    @ViewChild('purgeOrganizationTemplate', { read: ViewContainerRef }) purgeModalRef: ViewContainerRef;
+    @ViewChild('apiKeyTemplate', { read: ViewContainerRef }) apiKeyModalRef: ViewContainerRef;
+    @ViewChild('rotateApiKeyTemplate', { read: ViewContainerRef }) rotateApiKeyModalRef: ViewContainerRef;
+
+    loading = true;
+    canUseApi = false;
+    org: OrganizationResponse;
+    formPromise: Promise<any>;
+
+    private organizationId: string;
+    private modal: ModalComponent = null;
+
+    constructor(private componentFactoryResolver: ComponentFactoryResolver,
+        private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private route: ActivatedRoute, private syncService: SyncService) { }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            try {
+                this.org = await this.apiService.getOrganization(this.organizationId);
+                this.canUseApi = this.org.useApi;
+            } catch { }
+        });
+        this.loading = false;
+    }
+
+    async submit() {
+        try {
+            const request = new OrganizationUpdateRequest();
+            request.name = this.org.name;
+            request.businessName = this.org.businessName;
+            request.billingEmail = this.org.billingEmail;
+            this.formPromise = this.apiService.putOrganization(this.organizationId, request).then(() => {
+                return this.syncService.fullSync(true);
+            });
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Updated Organization Settings' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('organizationUpdated'));
+        } catch { }
+    }
+
+    deleteOrganization() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.deleteModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<DeleteOrganizationComponent>(
+            DeleteOrganizationComponent, this.deleteModalRef);
+        childComponent.organizationId = this.organizationId;
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+
+    purgeVault() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.purgeModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<PurgeVaultComponent>(PurgeVaultComponent, this.purgeModalRef);
+        childComponent.organizationId = this.organizationId;
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+
+    viewApiKey() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.apiKeyModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.apiKeyModalRef);
+        childComponent.organizationId = this.organizationId;
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+
+    rotateApiKey() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.rotateApiKeyModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<RotateApiKeyComponent>(RotateApiKeyComponent, this.rotateApiKeyModalRef);
+        childComponent.organizationId = this.organizationId;
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+}

src/app/organizations/settings/adjust-seats.component.html

@@ -0,0 +1,29 @@
+<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="card-body">
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
+        <h3 class="card-body-header">{{(add ? 'addSeats' : 'removeSeats') | i18n}}</h3>
+        <div class="row">
+            <div class="form-group col-6">
+                <label for="seatAdjustment">{{(add ? 'seatsToAdd' : 'seatsToRemove') | i18n}}</label>
+                <input id="seatAdjustment" class="form-control" type="number" name="SeatAdjustment"
+                    [(ngModel)]="seatAdjustment" min="0" step="1" required>
+            </div>
+        </div>
+        <div *ngIf="add" class="mb-3">
+            <strong>{{'total' | i18n}}:</strong> {{seatAdjustment || 0}} &times; {{seatPrice | currency:'$'}} = {{adjustedSeatTotal
+            | currency:'$'}} /{{interval | i18n}}
+        </div>
+        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span>{{'submit' | i18n}}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
+            {{'cancel' | i18n}}
+        </button>
+        <small class="d-block text-muted mt-3">
+            {{(add ? 'seatsAddNote' : 'seatsRemoveNote') | i18n}}
+        </small>
+    </div>
+</form>
+<app-payment [showMethods]="false"></app-payment>

src/app/organizations/settings/adjust-seats.component.ts

@@ -0,0 +1,89 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+    ViewChild,
+} from '@angular/core';
+
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { SeatRequest } from 'jslib/models/request/seatRequest';
+
+import { PaymentComponent } from '../../settings/payment.component';
+
+@Component({
+    selector: 'app-adjust-seats',
+    templateUrl: 'adjust-seats.component.html',
+})
+export class AdjustSeatsComponent {
+    @Input() seatPrice = 0;
+    @Input() add = true;
+    @Input() organizationId: string;
+    @Input() interval = 'year';
+    @Output() onAdjusted = new EventEmitter<number>();
+    @Output() onCanceled = new EventEmitter();
+
+    @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
+
+    seatAdjustment = 0;
+    formPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private router: Router, private activatedRoute: ActivatedRoute) { }
+
+    async submit() {
+        try {
+            const request = new SeatRequest();
+            request.seatAdjustment = this.seatAdjustment;
+            if (!this.add) {
+                request.seatAdjustment *= -1;
+            }
+
+            let paymentFailed = false;
+            const action = async () => {
+                const result = await this.apiService.postOrganizationSeat(this.organizationId, request);
+                if (result != null && result.paymentIntentClientSecret != null) {
+                    try {
+                        await this.paymentComponent.handleStripeCardPayment(result.paymentIntentClientSecret, null);
+                    } catch {
+                        paymentFailed = true;
+                    }
+                }
+            };
+            this.formPromise = action();
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: this.add ? 'Added Seats' : 'Removed Seats' });
+            this.onAdjusted.emit(this.seatAdjustment);
+            if (paymentFailed) {
+                this.toasterService.popAsync({
+                    body: this.i18nService.t('couldNotChargeCardPayInvoice'),
+                    type: 'warning',
+                    timeout: 10000,
+                });
+                this.router.navigate(['../billing'], { relativeTo: this.activatedRoute });
+            } else {
+                this.toasterService.popAsync('success', null,
+                    this.i18nService.t('adjustedSeats', request.seatAdjustment.toString()));
+            }
+        } catch { }
+    }
+
+    cancel() {
+        this.onCanceled.emit();
+    }
+
+    get adjustedSeatTotal(): number {
+        return this.seatAdjustment * this.seatPrice;
+    }
+}

src/app/organizations/settings/api-key.component.html

@@ -0,0 +1,48 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="apiKeyTitle">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+            <div class="modal-header">
+                <h2 class="modal-title" id="apiKeyTitle">{{'apiKey' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>{{'apiKeyDesc' | i18n}}</p>
+                <ng-container *ngIf="!clientSecret">
+                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                    <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
+                        [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
+                </ng-container>
+                <app-callout type="warning" *ngIf="clientSecret">{{'apiKeyWarning' | i18n}}</app-callout>
+                <app-callout type="info" title="{{'oauth2ClientCredentials' | i18n}}" icon="fa-key"
+                    *ngIf="clientSecret">
+                    <p class="mb-1">
+                        <strong>client_id:</strong><br>
+                        <code>{{clientId}}</code>
+                    </p>
+                    <p class="mb-1">
+                        <strong>client_secret:</strong><br>
+                        <code>{{clientSecret}}</code>
+                    </p>
+                    <p class="mb-1">
+                        <strong>scope:</strong><br>
+                        <code>{{scope}}</code>
+                    </p>
+                    <p class="mb-0">
+                        <strong>grant_type:</strong><br>
+                        <code>client_credentials</code>
+                    </p>
+                </app-callout>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"
+                    *ngIf="!clientSecret">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'viewApiKey' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/organizations/settings/api-key.component.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
+
+import { ApiKeyResponse } from 'jslib/models/response/apiKeyResponse';
+
+@Component({
+    selector: 'app-api-key',
+    templateUrl: 'api-key.component.html',
+})
+export class ApiKeyComponent {
+    organizationId: string;
+
+    masterPassword: string;
+    formPromise: Promise<ApiKeyResponse>;
+    clientId: string;
+    clientSecret: string;
+    scope: string;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private cryptoService: CryptoService, private router: Router) { }
+
+    async submit() {
+        if (this.masterPassword == null || this.masterPassword === '') {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassRequired'));
+            return;
+        }
+
+        const request = new PasswordVerificationRequest();
+        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
+        try {
+            this.formPromise = this.apiService.postOrganizationApiKey(this.organizationId, request);
+            const response = await this.formPromise;
+            this.clientSecret = response.apiKey;
+            this.clientId = 'organization.' + this.organizationId;
+            this.scope = 'api.organization';
+            this.analytics.eventTrack.next({ action: 'Viewed Organization API Key' });
+        } catch { }
+    }
+}

src/app/organizations/settings/change-plan.component.html

@@ -0,0 +1,11 @@
+<div class="card card-org-plans">
+    <div class="card-body">
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
+        <h2 class="card-body-header">{{'changeBillingPlan' | i18n}}</h2>
+        <p class="mb-0">{{'changeBillingPlanUpgrade' | i18n}}</p>
+        <app-organization-plans [showFree]="false" [showCancel]="true" plan="families" [organizationId]="organizationId"
+            (onCanceled)="cancel()">
+        </app-organization-plans>
+    </div>
+</div>