Move web to apps/web and bitwarden_license/bit-web

* Allow firefox relay service in generator

* Update generator.component.ts

* Update generator.component.ts

* make pretty

.gitattributes

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

.github/workflows/release.yml

@@ -1,184 +0,0 @@
----
-name: Release
-
-on:
-  workflow_dispatch:
-    inputs: {}
-
-jobs:
-  setup:
-    name: Setup
-    runs-on: ubuntu-20.04
-    outputs:
-      release_version: ${{ steps.version.outputs.package }}
-      tag_version: ${{ steps.version.outputs.tag }}
-    steps:
-      - name: Branch check
-        run: |
-          if [[ "$GITHUB_REF" != "refs/heads/rc" ]]; then
-            echo "==================================="
-            echo "[!] Can only release from rc branch"
-            echo "==================================="
-            exit 1
-          fi
-
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # 2.3.4
-
-      - name: Check Release Version
-        id: version
-        run: |
-          version=$( jq -r ".version" package.json)
-          previous_release_tag_version=$(
-            curl -sL https://api.github.com/repos/$GITHUB_REPOSITORY/releases/latest | jq -r ".tag_name"
-          )
-
-          if [ "v$version" == "$previous_release_tag_version" ]; then
-            echo "[!] Already released v$version. Please bump version to continue"
-            exit 1
-          fi
-
-          echo "::set-output name=package::$version"
-          echo "::set-output name=tag::v$version"
-
-
-  self-host:
-    name: Build self-host docker
-    runs-on: ubuntu-20.04
-    needs: setup
-    env:
-      _RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
-    steps:
-      - name: Print environment
-        run: |
-          whoami
-          docker --version
-          echo "GitHub ref: $GITHUB_REF"
-          echo "GitHub event: $GITHUB_EVENT"
-
-      - name: Setup DCT
-        id: setup-dct
-        uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
-        with:
-          azure-creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
-          azure-keyvault-name: "bitwarden-prod-kv"
-
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Pull latest selfhost rc image
-        run: docker pull bitwarden/web:rc
-
-      - name: Tag version
-        run: |
-          docker tag bitwarden/web:rc bitwarden/web:latest
-          docker tag bitwarden/web:rc bitwarden/web:$_RELEASE_VERSION
-
-      - name: List Docker images
-        run: docker images
-
-      - name: Push images
-        run: |
-          docker push bitwarden/web:latest
-          docker push bitwarden/web:$_RELEASE_VERSION
-        env:
-          DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
-
-      - name: Log out of Docker
-        run: docker logout
-
-
-  ghpages-deploy:
-    name: Deploy Web Vault
-    runs-on: ubuntu-20.04
-    needs:
-      - setup
-      - self-host
-    env:
-      _RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
-      _TAG_VERSION: ${{ needs.setup.outputs.tag_version }}
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
-        with:
-          ref: gh-pages
-
-      - name: Create deploy branch
-        run: |
-          git switch -c deploy-$_TAG_VERSION
-          git push -u origin deploy-$_TAG_VERSION
-          git switch rc
-
-      - name: Setup git config
-        run: |
-          git config user.name = "GitHub Action Bot"
-          git config user.email = "<>"
-          git config --global url."https://github.com/".insteadOf ssh://git@github.com/
-          git config --global url."https://".insteadOf ssh://
-
-      - name: Download latest cloud asset
-        uses: bitwarden/gh-actions/download-artifacts@23433be15ed6fd046ce12b6889c5184a8d9c8783
-        with:
-          workflow: build.yml
-          workflow_conclusion: success
-          branch: rc
-          artifacts: web-*-cloud-COMMERCIAL.zip
-
-      # This should result in a build directory in the current working directory
-      - name: Unzip build asset
-        run: unzip web-*-cloud-COMMERCIAL.zip
-
-      - name: Deploy GitHub Pages
-        uses: crazy-max/ghaction-github-pages@db4476a01402e1a7ce05f41832040eef16d14925  # v2.5.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          target_branch: deploy-${{ needs.setup.outputs.tag_version }}
-          build_dir: build
-          keep_history: true
-          commit_message: "Staging deploy ${{ needs.setup.outputs.release_version }}"
-
-      - name: Create Deploy PR
-        env:
-          PR_BRANCH: deploy-${{ env._TAG_VERSION }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh pr create --title "Deploy $_RELEASE_VERSION" \
-            --body "Deploying $_RELEASE_VERSION" \
-            --base gh-pages \
-            --head "$PR_BRANCH"
-
-
-  release:
-    name: Create GitHub Release
-    runs-on: ubuntu-20.04
-    needs:
-      - setup
-      - self-host
-      - ghpages-deploy
-    steps:
-      - name: Download latest build artifacts
-        uses: bitwarden/gh-actions/download-artifacts@23433be15ed6fd046ce12b6889c5184a8d9c8783
-        with:
-          workflow: build.yml
-          workflow_conclusion: success
-          branch: rc
-          artifacts: "web-*-selfhosted-COMMERCIAL.zip,
-                      web-*-selfhosted-open-source.zip"
-
-      - name: Rename assets
-        run: |
-          mv web-*-selfhosted-COMMERCIAL.zip web-${{ needs.setup.outputs.release_version }}-selfhosted-COMMERCIAL.zip
-          mv web-*-selfhosted-open-source.zip web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip
-
-      - name: Create release
-        uses: ncipollo/release-action@95215a3cb6e6a1908b3c44e00b4fdb15548b1e09
-        with:
-          name: "Version ${{ needs.setup.outputs.release_version }}"
-          commit: ${{ github.sha }}
-          tag: "${{ needs.setup.outputs.tag_version }}"
-          body: "<insert release notes here>"
-          artifacts: "web-${{ needs.setup.outputs.release_version }}-selfhosted-COMMERCIAL.zip,
-                      web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip"
-          token: ${{ secrets.GITHUB_TOKEN }}

.gitmodules

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

SECURITY.md

@@ -1,45 +0,0 @@
-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!

apps/web/.editorconfig

@@ -12,7 +12,7 @@ insert_final_newline = true
 [*.{js,ts,scss,html}]
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 
 [*.{ts}]
 quote_type = single

apps/web/.eslintignore

@@ -0,0 +1,8 @@
+**/dist
+**/build
+jslib
+webpack.config.js
+scripts/optimize.js
+config.js
+
+**/node_modules

apps/web/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "root": true,
+  "env": {
+    "browser": true
+  },
+  "extends": ["./jslib/shared/eslintrc.json"],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc"
+        },
+        "newlines-between": "always",
+        "pathGroups": [
+          {
+            "pattern": "jslib-*/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "src/**/*",
+            "group": "parent",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"]
+      }
+    ]
+  }
+}

apps/web/.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# Apply Prettier https://github.com/bitwarden/web/pull/1347
+56477eb39cfd8a73c9920577d24d75fed36e2cf5

apps/web/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

apps/web/.github/ISSUE_TEMPLATE/bug.yml

@@ -6,7 +6,7 @@ body:
     attributes:
       value: |
         Thanks for taking the time to fill out this bug report!
-        
+
         Please do not submit feature requests. The [Community Forums](https://community.bitwarden.com) has a section for submitting, voting for, and discussing product feature requests.
   - type: textarea
     id: reproduce

apps/web/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,28 @@
+## Type of change
+
+- [ ] Bug fix
+- [ ] New feature development
+- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
+- [ ] Build/deploy pipeline (DevOps)
+- [ ] Other
+
+## Objective
+
+<!--Describe what the purpose of this PR is. For example: what bug you're fixing or what new feature you're adding-->
+
+## Code changes
+
+<!--Explain the changes you've made to each file or major component. This should help the reviewer understand your changes-->
+<!--Also refer to any related changes or PRs in other repositories-->
+
+- **file.ext:** Description of what was changed and why
+
+## Screenshots
+
+<!--Required for any UI changes. Delete if not applicable-->
+
+## Before you submit
+
+- [ ] I have checked for **linting** errors (`npm run lint`) (required)
+- [ ] This change requires a **documentation update** (notify the documentation team)
+- [ ] This change has particular **deployment requirements** (notify the DevOps team)

apps/web/.github/workflows/build.yml

@@ -9,8 +9,12 @@ on:
         required: false
   push:
     branches-ignore:
-      - 'l10n_master'
-      - 'gh-pages'
+      - "l10n_master"
+      - "gh-pages"
+      - "deploy"
+    paths-ignore:
+      - '.github/workflows/**'
+
 
 jobs:
   cloc:
@@ -29,6 +33,27 @@ jobs:
         run: cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
 
 
+  lint:
+    name: Lint
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@a12a3943b4bdde767164f792f33f40b04645d846
+
+      - name: Cache npm
+        id: npm-cache
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        with:
+          path: "~/.npm"
+          key: ${{ runner.os }}-npm-lint-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+
   setup:
     name: Setup
     runs-on: ubuntu-20.04
@@ -40,32 +65,27 @@ jobs:
 
       - name: Get GitHub sha as version
         id: version
-        run: |
-          echo "::set-output name=value::${GITHUB_SHA:0:7}"
+        run: echo "::set-output name=value::${GITHUB_SHA:0:7}"
 
 
   build-oss-selfhost:
     name: Build OSS zip
     runs-on: ubuntu-20.04
-    needs: setup
+    needs:
+      - setup
+      - lint
     env:
       _VERSION: ${{ needs.setup.outputs.version }}
     steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
       - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
-          node-version: '14'
-
-      - name: Update NPM
-        run: |
-          npm install -g npm@7
-
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
-        with:
-          path: '~/.npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -77,9 +97,6 @@ jobs:
           echo "GitHub ref: $GITHUB_REF"
           echo "GitHub event: $GITHUB_EVENT"
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
       - name: Install dependencies
         run: npm ci
 
@@ -99,25 +116,21 @@ jobs:
   build-cloud:
     name: Build Cloud zip
     runs-on: ubuntu-20.04
-    needs: setup
+    needs:
+      - setup
+      - lint
     env:
       _VERSION: ${{ needs.setup.outputs.version }}
     steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
       - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
-          node-version: '14'
-
-      - name: Update NPM
-        run: |
-          npm install -g npm@7
-
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
-        with:
-          path: '~/.npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -129,9 +142,6 @@ jobs:
           echo "GitHub ref: $GITHUB_REF"
           echo "GitHub event: $GITHUB_EVENT"
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
       - name: Install dependencies
         run: npm ci
 
@@ -151,25 +161,21 @@ jobs:
   build-commercial-selfhost:
     name: Build SelfHost Docker image
     runs-on: ubuntu-20.04
-    needs: setup
+    needs:
+      - setup
+      - lint
     env:
       _VERSION: ${{ needs.setup.outputs.version }}
     steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
       - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
-          node-version: '14'
-
-      - name: Update NPM
-        run: |
-          npm install -g npm@7
-
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
-        with:
-          path: '~/.npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -182,19 +188,13 @@ jobs:
           echo "GitHub event: $GITHUB_EVENT"
 
       - name: Setup DCT
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix-rc'
         id: setup-dct
         uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
         with:
           azure-creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
           azure-keyvault-name: "bitwarden-prod-kv"
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Restore
-        run: dotnet tool restore
-
       - name: Install dependencies
         run: npm ci
 
@@ -228,48 +228,81 @@ jobs:
         if: github.ref == 'refs/heads/master'
         run: docker tag bitwarden/web bitwarden/web:dev
 
+      - name: Tag hotfix branch
+        if: github.ref == 'refs/heads/hotfix-rc'
+        run: docker tag bitwarden/web bitwarden/web:hotfix-rc
+
       - name: List Docker images
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix-rc'
         run: docker images
 
-      - name: Push rc images
+      - name: Push rc image
         if: github.ref == 'refs/heads/rc'
         run: docker push bitwarden/web:rc
         env:
           DOCKER_CONTENT_TRUST: 1
           DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
 
-      - name: Push dev images
+      - name: Push dev image
         if: github.ref == 'refs/heads/master'
         run: docker push bitwarden/web:dev
         env:
           DOCKER_CONTENT_TRUST: 1
           DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
 
+      - name: Push hotfix image
+        if: github.ref == 'refs/heads/hotfix-rc'
+        run: docker push bitwarden/web:hotfix-rc
+        env:
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
+
+      - name: Log out of Docker
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix-rc'
+        run: |
+          docker logout
+          echo "DOCKER_CONTENT_TRUST=0" >> $GITHUB_ENV
+
+      - name: Login to Azure - QA Subscription
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        with:
+          creds: ${{ secrets.AZURE_QA_KV_CREDENTIALS }}
+
+      - name: Login to Azure ACR
+        run: az acr login -n bitwardenqa
+
+      - name: Tag and Push RC to Azure ACR QA registry
+        env:
+          REGISTRY: bitwardenqa.azurecr.io
+        run: |
+          IMAGE_TAG=$(echo "${GITHUB_REF:11}" | sed "s#/#-#g")  # slash safe branch name
+          if [[ "$IMAGE_TAG" == "master" ]]; then
+            IMAGE_TAG=dev
+          fi
+          docker tag bitwarden/web \
+            $REGISTRY/web-sh:$IMAGE_TAG
+          docker push $REGISTRY/web-sh:$IMAGE_TAG
+
       - name: Log out of Docker
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
         run: docker logout
 
 
   build-qa:
     name: Build Docker images for QA environment
     runs-on: ubuntu-20.04
+    needs:
+      - setup
+      - lint
     steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
       - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
-          node-version: '14'
-
-      - name: Update NPM
-        run: |
-          npm install -g npm@7
-
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
-        with:
-          path: '~/.npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -289,12 +322,6 @@ jobs:
       - name: Log into container registry
         run: az acr login -n bitwardenqa
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Restore
-        run: dotnet tool restore
-
       - name: Install dependencies
         run: npm ci
 
@@ -318,7 +345,7 @@ jobs:
       - name: Get image tag
         id: image-tag
         run: |
-          IMAGE_TAG=$(echo "$GITHUB_REF" | awk '{split($0, a, "/"); print a[3];}')
+          IMAGE_TAG=$(echo "${GITHUB_REF:11}" | sed "s#/#-#g")
           TAG_EXTENSION=${{ github.event.inputs.custom_tag_extension }}
 
           if [[ $TAG_EXTENSION ]]; then
@@ -355,35 +382,24 @@ jobs:
     name: Test code on Windows
     runs-on: windows-2019
     steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
       - name: Set up NuGet
         uses: nuget/setup-nuget@04b0c2b8d1b97922f67eca497d7cf0bf17b8ffe1
         with:
-          nuget-version: 'latest'
-
-      - name: Set up MSBuild
-        uses: microsoft/setup-msbuild@c26a08ba26249b81327e26f6ef381897b6a8754d
-
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
-        with:
-          path: '~/.npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          nuget-version: "latest"
 
       - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
-          node-version: '14'
-
-      - name: Update NPM
-        run: |
-          npm install -g npm@7
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
           nuget help | grep Version
-          msbuild -version
-          dotnet --info
           node --version
           npm --version
           echo "GitHub ref: $GITHUB_REF"
@@ -392,14 +408,118 @@ jobs:
           GITHUB_REF: ${{ github.ref }}
           GITHUB_EVENT: ${{ github.event_name }}
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
       - name: Install dependencies
         run: npm ci
 
-      - name: NPM install
-        run: npm ci
-
       - name: NPM build
         run: npm run build:bit:cloud
+
+
+  crowdin-push:
+    name: Crowdin Push
+    if: github.ref == 'refs/heads/master'
+    needs:
+      - build-oss-selfhost
+      - build-cloud
+      - build-commercial-selfhost
+      - build-qa
+    runs-on: ubuntu-20.04
+    env:
+      _CROWDIN_PROJECT_ID: "308189"
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+
+      - name: Login to Azure
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        with:
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "crowdin-api-token"
+
+      - name: Upload Sources
+        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea  # v1.3.2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
+        with:
+          config: crowdin.yml
+          crowdin_branch_name: master
+          upload_sources: true
+          upload_translations: false
+
+
+  check-failures:
+    name: Check for failures
+    if: always()
+    runs-on: ubuntu-20.04
+    needs:
+      - cloc
+      - setup
+      - lint
+      - build-oss-selfhost
+      - build-cloud
+      - build-commercial-selfhost
+      - build-qa
+      - crowdin-push
+      - windows
+    steps:
+      - name: Check if any job failed
+        if: ${{ (github.ref == 'refs/heads/master') || (github.ref == 'refs/heads/rc') }}
+        env:
+          CLOC_STATUS: ${{ needs.cloc.result }}
+          LINT_STATUS: ${{ needs.lint.result }}
+          SETUP_STATUS: ${{ needs.setup.result }}
+          BUILD_OSS_SELFHOST_STATUS: ${{ needs.build-oss-selfhost.result }}
+          BUILD_CLOUD_STATUS: ${{ needs.build-cloud.result }}
+          BUILD_COMMERCIAL_SELFHOST_STATUS: ${{ needs.build-commercial-selfhost.result }}
+          BUILD_QA_STATUS: ${{ needs.build-qa.result }}
+          CROWDIN_PUSH_STATUS: ${{ needs.crowdin-push.result }}
+          WINDOWS_STATUS: ${{ needs.windows.result }}
+        run: |
+          if [ "$CLOC_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$LINT_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$SETUP_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_OSS_SELFHOST_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_CLOUD_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_COMMERCIAL_SELFHOST_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_QA_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$CROWDIN_PUSH_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$WINDOWS_STATUS" = "failure" ]; then
+              exit 1
+          fi
+
+      - name: Login to Azure - Prod Subscription
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        if: failure()
+        with:
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        if: failure()
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "devops-alerts-slack-webhook-url"
+
+      - name: Notify Slack on failure
+        uses: act10ns/slack@e4e71685b9b239384b0f676a63c32367f59c2522  # v1.2.2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ steps.retrieve-secrets.outputs.devops-alerts-slack-webhook-url }}
+        with:
+          status: ${{ job.status }}

apps/web/.github/workflows/crowdin-pull.yml

@@ -1,15 +1,15 @@
 ---
-name: Crowdin Sync
+name: Crowdin Pull
 
 on:
   workflow_dispatch:
     inputs: {}
-# schedule:
-#   - cron: '0 0 * * *'
+  schedule:
+    - cron: "0 0 * * 5"
 
 jobs:
-  crowdin-sync:
-    name: Autosync
+  crowdin-pull:
+    name: Pull
     runs-on: ubuntu-20.04
     env:
       _CROWDIN_PROJECT_ID: "308189"
@@ -30,7 +30,7 @@ jobs:
           secrets: "crowdin-api-token"
 
       - name: Download translations
-        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea
+        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea  # v1.3.2
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}

apps/web/.github/workflows/enforce-labels.yml

@@ -0,0 +1,16 @@
+---
+name: Enforce PR labels
+
+on:
+  pull_request:
+    types: [labeled, unlabeled, opened, edited, synchronize]
+jobs:
+  enforce-label:
+    name: EnforceLabel
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Enforce Label
+        uses: yogevbd/enforce-label-action@8d1e1709b1011e6d90400a0e6cf7c0b77aa5efeb
+        with:
+          BANNED_LABELS: "hold"
+          BANNED_LABELS_DESCRIPTION: "PRs on hold cannot be merged"

apps/web/.github/workflows/qa-deploy.yml

@@ -9,8 +9,8 @@ on:
         required: false
 
 env:
-  _QA_CLUSTER_RESOURCE_GROUP: "bitwarden-devops"
-  _QA_CLUSTER_NAME: "dev-aks"
+  _QA_CLUSTER_RESOURCE_GROUP: "bw-env-qa"
+  _QA_CLUSTER_NAME: "bw-aks-qa"
   _QA_K8S_NAMESPACE: "bw-qa"
   _QA_K8S_APP_NAME: "bw-web"
 
@@ -23,8 +23,7 @@ jobs:
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
 
       - name: Setup
-        run:
-          export PATH=$PATH:~/work/web/web
+        run: export PATH=$PATH:~/work/web/web
 
       - name: Login to Azure
         uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
@@ -36,16 +35,16 @@ jobs:
         uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
         with:
           keyvault: "bitwarden-qa-kv"
-          secrets: "dev-aks-kubectl-credentials"
+          secrets: "qa-aks-kubectl-credentials"
 
-      - name: Login to dev-aks-kubectl SP
+      - name: Login with qa-aks-kubectl-credentials SP
         uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
         with:
-          creds: ${{ env.dev-aks-kubectl-credentials }}
+          creds: ${{ env.qa-aks-kubectl-credentials }}
 
       - name: Setup AKS access
-        env:
-          USER_ID: ${{ env.qa-kubectl-managed-identity-clientId }}
+        #env:
+        #  USER_ID: ${{ env.qa-kubectl-managed-identity-clientId }}
         run: |
           echo "---az install---"
           az aks install-cli --install-location ./kubectl --kubelogin-install-location ./kubelogin
@@ -55,7 +54,7 @@ jobs:
       - name: Get image tag
         id: image_tag
         run: |
-          IMAGE_TAG=$(echo "$GITHUB_REF" | awk '{split($0, a, "/"); print a[3];}')
+          IMAGE_TAG=$(echo "${GITHUB_REF:11}" | sed "s#/#-#g")
           TAG_EXTENSION=${{ github.event.inputs.image_extension }}
 
           if [[ $TAG_EXTENSION ]]; then

apps/web/.github/workflows/release.yml

@@ -0,0 +1,334 @@
+---
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      release_type:
+        description: 'Release Options'
+        required: true
+        default: 'Initial Release'
+        type: choice
+        options:
+          - Initial Release
+          - Redeploy
+          - Dry Run
+
+jobs:
+  setup:
+    name: Setup
+    runs-on: ubuntu-20.04
+    outputs:
+      release_version: ${{ steps.version.outputs.version }}
+      tag_version: ${{ steps.version.outputs.version }}
+      branch_name: ${{ steps.branch.outputs.branch_name }}
+    steps:
+      - name: Branch check
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
+        run: |
+          if [[ "$GITHUB_REF" != "refs/heads/rc" ]] && [[ "$GITHUB_REF" != "refs/heads/hotfix-rc" ]]; then
+            echo "==================================="
+            echo "[!] Can only release from the 'rc' or 'hotfix-rc' branches"
+            echo "==================================="
+            exit 1
+          fi
+
+      - name: Checkout repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # 2.4.0
+
+      - name: Check Release Version
+        id: version
+        uses: bitwarden/gh-actions/release-version-check@ea9fab01d76940267b4147cc1c4542431246b9f6
+        with:
+          release-type: ${{ github.event.inputs.release_type }}
+          project-type: ts
+          file: package.json
+
+      - name: Get branch name
+        id: branch
+        run: |
+          BRANCH_NAME=$(basename ${{ github.ref }})
+          echo "::set-output name=branch_name::$BRANCH_NAME"
+
+
+  self-host:
+    name: Release self-host docker
+    runs-on: ubuntu-20.04
+    needs: setup
+    env:
+      _BRANCH_NAME: ${{ needs.setup.outputs.branch_name }}
+      _RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
+      _RELEASE_OPTION: ${{ github.event.inputs.release_type }}
+    steps:
+      - name: Print environment
+        run: |
+          whoami
+          docker --version
+          echo "GitHub ref: $GITHUB_REF"
+          echo "GitHub event: $GITHUB_EVENT"
+          echo "Github Release Option: $_RELEASE_OPTION"
+
+      - name: Checkout repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579
+
+      ########## DockerHub ##########
+      - name: Setup DCT
+        id: setup-dct
+        uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
+        with:
+          azure-creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+          azure-keyvault-name: "bitwarden-prod-kv"
+
+      - name: Pull latest selfhost image
+        run: |
+          if [[ "${{ github.event.inputs.release_type }}" == "Dry Run" ]]; then
+            docker pull bitwarden/web:latest
+          else
+            docker pull bitwarden/web:$_BRANCH_NAME
+          fi
+
+      - name: Tag version and latest
+        run: |
+          if [[ "${{ github.event.inputs.release_type }}" == "Dry Run" ]]; then
+            docker tag bitwarden/web:latest bitwarden/web:dryrun
+          else
+            docker tag bitwarden/web:$_BRANCH_NAME bitwarden/web:$_RELEASE_VERSION
+            docker tag bitwarden/web:$_BRANCH_NAME bitwarden/web:latest
+          fi
+
+      - name: Push version and latest image
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
+        env:
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
+        run: |
+          docker push bitwarden/web:$_RELEASE_VERSION
+          docker push bitwarden/web:latest
+
+      - name: Log out of Docker and disable Docker Notary
+        run: |
+          docker logout
+          echo "DOCKER_CONTENT_TRUST=0" >> $GITHUB_ENV
+
+      ########## ACR ##########
+      - name: Login to Azure - QA Subscription
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        with:
+          creds: ${{ secrets.AZURE_QA_KV_CREDENTIALS }}
+
+      - name: Login to Azure ACR
+        run: az acr login -n bitwardenqa
+
+      - name: Tag version and latest
+        env:
+          REGISTRY: bitwardenqa.azurecr.io
+        run: |
+          if [[ "${{ github.event.inputs.release_type }}" == "Dry Run" ]]; then
+            docker tag bitwarden/web:latest $REGISTRY/web:dryrun
+          else
+            docker tag bitwarden/web:$_BRANCH_NAME $REGISTRY/web:$_RELEASE_VERSION
+            docker tag bitwarden/web:$_BRANCH_NAME $REGISTRY/web:latest
+
+            docker tag bitwarden/web:$_BRANCH_NAME $REGISTRY/web-sh:$_RELEASE_VERSION
+            docker tag bitwarden/web:$_BRANCH_NAME $REGISTRY/web-sh:latest
+          fi
+
+      - name: Push version and latest image
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
+        env:
+          REGISTRY: bitwardenqa.azurecr.io
+        run: |
+          docker push $REGISTRY/web:$_RELEASE_VERSION
+          docker push $REGISTRY/web:latest
+
+          docker push $REGISTRY/web-sh:$_RELEASE_VERSION
+          docker push $REGISTRY/web-sh:latest
+
+      - name: Log out of Docker
+        run: docker logout
+
+
+  ghpages-deploy:
+    name: Deploy Web Vault to GitHub Pages
+    runs-on: ubuntu-20.04
+    needs:
+      - setup
+      - self-host
+    env:
+      _RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
+      _TAG_VERSION: ${{ needs.setup.outputs.tag_version }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # v2.4.0
+        with:
+          ref: gh-pages
+
+      - name: Create gh-pages-deploy branch
+        run: |
+          git switch -c gh-pages-deploy-$_TAG_VERSION
+          git push -u origin gh-pages-deploy-$_TAG_VERSION
+
+      - name: Checkout Repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # v2.4.0
+
+      - name: Setup git config
+        run: |
+          git config user.name = "GitHub Action Bot"
+          git config user.email = "<>"
+          git config --global url."https://github.com/".insteadOf ssh://git@github.com/
+          git config --global url."https://".insteadOf ssh://
+
+      - name: Download latest cloud asset
+        uses: bitwarden/gh-actions/download-artifacts@c1fa8e09871a860862d6bbe36184b06d2c7e35a8
+        with:
+          workflow: build.yml
+          workflow_conclusion: success
+          branch: ${{ needs.setup.outputs.branch_name }}
+          artifacts: web-*-cloud-COMMERCIAL.zip
+
+      # This should result in a build directory in the current working directory
+      - name: Unzip build asset
+        run: unzip web-*-cloud-COMMERCIAL.zip
+
+      - name: Deploy GitHub Pages
+        uses: crazy-max/ghaction-github-pages@a117e4aa1fb4854d021546d2abdfac95be568a3a  # v2.6.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          target_branch: gh-pages-deploy-${{ needs.setup.outputs.tag_version }}
+          build_dir: build
+          keep_history: true
+          commit_message: "Staging deploy ${{ needs.setup.outputs.release_version }}"
+          dry_run: ${{ github.event.inputs.release_type == 'Dry Run' }}
+
+      - name: Create GitHub Pages Deploy PR
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
+        env:
+          PR_BRANCH: gh-pages-deploy-${{ env._TAG_VERSION }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr create --title "Deploy $_RELEASE_VERSION to GitHub Pages" \
+            --body "Deploying $_RELEASE_VERSION" \
+            --base gh-pages \
+            --head "$PR_BRANCH"
+
+
+  cfpages-deploy:
+    name: Deploy Web Vault to CloudFlare Pages branch
+    runs-on: ubuntu-20.04
+    needs:
+      - setup
+      - self-host
+    env:
+      _RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
+      _TAG_VERSION: ${{ needs.setup.outputs.tag_version }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # v2.4.0
+
+      - name: Download latest cloud asset
+        uses: bitwarden/gh-actions/download-artifacts@c1fa8e09871a860862d6bbe36184b06d2c7e35a8
+        with:
+          workflow: build.yml
+          workflow_conclusion: success
+          branch: ${{ needs.setup.outputs.branch_name }}
+          artifacts: web-*-cloud-COMMERCIAL.zip
+
+      # This should result in a build directory in the current working directory
+      - name: Unzip build asset
+        run: unzip web-*-cloud-COMMERCIAL.zip
+
+      - name: Checkout Repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # v2.4.0
+        with:
+          ref: deploy
+          path: deployment
+
+      - name: Setup git config
+        run: |
+          git config --global user.name = "GitHub Action Bot"
+          git config --global user.email = "<>"
+          git config --global url."https://github.com/".insteadOf ssh://git@github.com/
+          git config --global url."https://".insteadOf ssh://
+
+      - name: Deploy CloudFlare Pages
+        run: |
+          rm -rf ./*
+          cp -R ../build/* .
+        working-directory: deployment
+
+      - name: Create cf-pages-deploy branch
+        run: |
+          git switch -c cf-pages-deploy-$_TAG_VERSION
+          git add .
+          git commit -m "Staging deploy ${{ needs.setup.outputs.release_version }}"
+          git push -u origin cf-pages-deploy-$_TAG_VERSION
+        working-directory: deployment    
+
+      - name: Create CloudFlare Pages Deploy PR
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
+        env:
+          PR_BRANCH: cf-pages-deploy-${{ env._TAG_VERSION }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr create --title "Deploy $_RELEASE_VERSION to CloudFlare Pages" \
+            --body "Deploying $_RELEASE_VERSION" \
+            --base deploy \
+            --head "$PR_BRANCH"
+
+
+  release:
+    name: Create GitHub Release
+    runs-on: ubuntu-20.04
+    needs:
+      - setup
+      - self-host
+      - ghpages-deploy
+      - cfpages-deploy
+    steps:
+      - name: Download latest build artifacts
+        uses: bitwarden/gh-actions/download-artifacts@23433be15ed6fd046ce12b6889c5184a8d9c8783
+        with:
+          workflow: build.yml
+          workflow_conclusion: success
+          branch: ${{ needs.setup.outputs.branch_name }}
+          artifacts: "web-*-selfhosted-COMMERCIAL.zip,
+            web-*-selfhosted-open-source.zip"
+
+      - name: Rename assets
+        run: |
+          mv web-*-selfhosted-COMMERCIAL.zip web-${{ needs.setup.outputs.release_version }}-selfhosted-COMMERCIAL.zip
+          mv web-*-selfhosted-open-source.zip web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip
+
+      - name: Create release
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
+        uses: ncipollo/release-action@40bb172bd05f266cf9ba4ff965cb61e9ee5f6d01
+        with:
+          name: "Version ${{ needs.setup.outputs.release_version }}"
+          commit: ${{ github.sha }}
+          tag: "${{ needs.setup.outputs.tag_version }}"
+          body: "<insert release notes here>"
+          artifacts: "web-${{ needs.setup.outputs.release_version }}-selfhosted-COMMERCIAL.zip,
+            web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip"
+          token: ${{ secrets.GITHUB_TOKEN }}
+          draft: true
+
+
+  dry-run:
+    name: Dry Run Cleanup
+    runs-on: ubuntu-20.04
+    if: ${{ github.event.inputs.release_type == 'Dry Run' }}
+    env:
+      _TAG_VERSION: ${{ needs.setup.outputs.tag_version }}
+    needs:
+      - setup
+      - release
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # 2.4.0
+
+      - name: Remove gh-pages-deploy branch
+        run: git push origin --delete gh-pages-deploy-$_TAG_VERSION
+
+      - name: Remove cf-pages-deploy branch
+        run: git push origin --delete cf-pages-deploy-$_TAG_VERSION

apps/web/.github/workflows/version-bump.yml

@@ -0,0 +1,71 @@
+---
+name: Version Bump
+
+on:
+  workflow_dispatch:
+    inputs:
+      version_number:
+        description: "New Version"
+        required: true
+
+jobs:
+  bump_props_version:
+    name: "Create version_bump_${{ github.event.inputs.version_number }} branch"
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout Branch
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579
+
+      - name: Create Version Branch
+        run: |
+          git switch -c version_bump_${{ github.event.inputs.version_number }}
+          git push -u origin version_bump_${{ github.event.inputs.version_number }}
+
+      - name: Checkout Version Branch
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579
+        with:
+          ref: version_bump_${{ github.event.inputs.version_number }}
+
+      - name: Bump Version - package.json
+        uses: bitwarden/gh-actions/version-bump@03ad9a873c39cdc95dd8d77dbbda67f84db43945
+        with:
+          version: ${{ github.event.inputs.version_number }}
+          file_path: "./package.json"
+
+      - name: Bump Version - package-lock.json
+        uses: bitwarden/gh-actions/version-bump@03ad9a873c39cdc95dd8d77dbbda67f84db43945
+        with:
+          version: ${{ github.event.inputs.version_number }}
+          file_path: "./package-lock.json"
+
+      - name: Commit files
+        run: |
+          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git commit -m "Bumped version to ${{ github.event.inputs.version_number }}" -a
+
+      - name: Push changes
+        run: git push -u origin version_bump_${{ github.event.inputs.version_number }}
+
+      - name: Create Version PR
+        env:
+          PR_BRANCH: "version_bump_${{ github.event.inputs.version_number }}"
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          BASE_BRANCH: master
+          TITLE: "Bump version to ${{ github.event.inputs.version_number }}"
+        run: |
+          gh pr create --title "$TITLE" \
+            --base "$BASE" \
+            --head "$PR_BRANCH" \
+            --label "version update" \
+            --label "automated pr" \
+            --body "
+              ## Type of change
+              - [ ] Bug fix
+              - [ ] New feature development
+              - [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
+              - [ ] Build/deploy pipeline (DevOps)
+              - [X] Other
+
+              ## Objective
+              Automated version bump to ${{ github.event.inputs.version_number }}"

apps/web/.github/workflows/workflow-linter.yml

@@ -0,0 +1,11 @@
+---
+name: Workflow Linter
+
+on:
+  pull_request:
+    paths:
+      - .github/workflows/**
+
+jobs:
+  call-workflow:
+    uses: bitwarden/gh-actions/.github/workflows/workflow-linter.yml@master

apps/web/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

apps/web/.prettierignore

@@ -0,0 +1,12 @@
+# Build directories
+build
+dist
+
+#jslib
+
+# External libraries / auto synced locales
+src/locales
+src/404/*.min.css
+
+# Github Workflows
+.github/workflows

apps/web/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 100
+}

apps/web/CONTRIBUTING.md

@@ -6,17 +6,12 @@ Please visit our [Community Forums](https://community.bitwarden.com/) for genera
 
 Here is how you can get involved:
 
-* **Request a new feature:** Go to the [Feature Requests category](https://community.bitwarden.com/c/feature-requests/) of the Community Forums. Please search existing feature requests before making a new one
-  
-* **Write code for a new feature:** Make a new post in the [Github Contributions category](https://community.bitwarden.com/c/github-contributions/) of the Community Forums. Include a description of your proposed contribution, screeshots, and links to any relevant feature requests. This helps get feedback from the community and Bitwarden team members before you start writing code
-  
-* **Report a bug or submit a bugfix:** Use Github issues and pull requests
-  
-* **Write documentation:** Submit a pull request to the [Bitwarden help repository](https://github.com/bitwarden/help)
-  
-* **Help other users:** Go to the [User-to-User Support category](https://community.bitwarden.com/c/support/) on the Community Forums
-  
-* **Translate:** See the localization (l10n) section below
+- **Request a new feature:** Go to the [Feature Requests category](https://community.bitwarden.com/c/feature-requests/) of the Community Forums. Please search existing feature requests before making a new one
+- **Write code for a new feature:** Make a new post in the [Github Contributions category](https://community.bitwarden.com/c/github-contributions/) of the Community Forums. Include a description of your proposed contribution, screeshots, and links to any relevant feature requests. This helps get feedback from the community and Bitwarden team members before you start writing code
+- **Report a bug or submit a bugfix:** Use Github issues and pull requests
+- **Write documentation:** Submit a pull request to the [Bitwarden help repository](https://github.com/bitwarden/help)
+- **Help other users:** Go to the [Ask the Bitwarden Community category](https://community.bitwarden.com/c/support/) on the Community Forums
+- **Translate:** See the localization (l10n) section below
 
 ## Contributor Agreement
 
@@ -24,9 +19,9 @@ Please sign the [Contributor Agreement](https://cla-assistant.io/bitwarden/web)
 
 ## Pull Request Guidelines
 
-* use `npm run lint` and fix any linting suggestions before submitting a pull request
-* commit any pull requests against the `master` branch
-* include a link to your Community Forums post
+- use `npm run lint` and fix any linting suggestions before submitting a pull request
+- commit any pull requests against the `master` branch
+- include a link to your Community Forums post
 
 # Localization (l10n)
 
@@ -36,6 +31,6 @@ We use a translation tool called [Crowdin](https://crowdin.com) to help manage o
 
 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).
+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/dwbit).
 
 You can read Crowdin's getting started guide for translators here: https://support.crowdin.com/crowdin-intro/

apps/web/README.md

@@ -1,3 +1,9 @@
+> **Repository Reorganization in Progress**
+>
+> We are currently migrating some projects over to a mono repository. For existing PR's we will be providing documentation on how to move/migrate them. To minimize the overhead we are actively reviewing open PRs. If possible please ensure any pending comments are resolved as soon as possible.
+>
+> New pull requests created during this transition period may not get addressed —if needed, please create a new PR after the reorganization is complete.
+
 <p align="center">
     <img src="https://raw.githubusercontent.com/bitwarden/brand/master/screenshots/web-vault-macbook.png" alt="" width="600" height="358" />
 </p>
@@ -23,8 +29,8 @@
 
 ### Requirements
 
-- [Node.js](https://nodejs.org) v14.17 or greater
-- NPM v7
+- [Node.js](https://nodejs.org) v16.13.1 or greater
+- NPM v8
 
 ### Run the app
 
@@ -41,28 +47,52 @@ If you want to point the development web vault to the production APIs, you can r
 
 ```
 npm install
-ENV=production npm run build:oss:watch
+ENV=cloud npm run build:oss:watch
 ```
 
 You can also manually adjusting your API endpoint settings by adding `config/local.json` overriding any of the following values:
 
 ```json
 {
+  "dev": {
     "proxyApi": "http://your-api-url",
     "proxyIdentity": "http://your-identity-url",
     "proxyEvents": "http://your-events-url",
     "proxyNotifications": "http://your-notifications-url",
-    "allowedHosts": ["hostnames-to-allow-in-webpack"],
-    "urls": {
-      
-    }
+    "allowedHosts": ["hostnames-to-allow-in-webpack"]
+  },
+  "urls": {}
 }
 ```
 
 Where the `urls` object is defined by the [Urls type in jslib](https://github.com/bitwarden/jslib/blob/master/common/src/abstractions/environment.service.ts).
 
+## We're Hiring!
+
+Interested in contributing in a big way? Consider joining our team! We're hiring for many positions. Please take a look at our [Careers page](https://bitwarden.com/careers/) to see what opportunities are currently open as well as what it's like to work at Bitwarden.
+
 ## Contribute
 
 Code contributions are welcome! Please commit any pull requests against the `master` branch. Learn more about how to contribute by reading the [`CONTRIBUTING.md`](CONTRIBUTING.md) file.
 
 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.
+
+## Prettier
+
+We recently migrated to using Prettier as code formatter. All previous branches will need to updated to avoid large merge conflicts using the following steps:
+
+1. Check out your local Branch
+2. Run `git merge 2b0a9d995e0147601ca8ae4778434a19354a60c2`
+3. Resolve any merge conflicts, commit.
+4. Run `npm run prettier`
+5. Commit
+6. Run `git merge -Xours 56477eb39cfd8a73c9920577d24d75fed36e2cf5`
+7. Push
+
+### Git blame
+
+We also recommend that you configure git to ignore the prettier revision using:
+
+```bash
+git config blame.ignoreRevsFile .git-blame-ignore-revs
+```

apps/web/SECURITY.md

@@ -0,0 +1,21 @@
+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 please submit a report through our [HackerOne Program](https://hackerone.com/bitwarden/). 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).
+
+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
+
+# We want to help you!
+
+If you have something that you feel is close to exploitation, or if you'd like some information regarding the internal API, or generally have any questions regarding the app that would help in your efforts, please email us at https://bitwarden.com/contact and ask for that information. As stated above, Bitwarden wants to help you find issues, and is more than willing to help.
+
+Thank you for helping keep Bitwarden and our users safe!

apps/web/config.js

@@ -0,0 +1,36 @@
+function load(envName) {
+  return {
+    ...require("./config/base.json"),
+    ...loadConfig(envName),
+    ...loadConfig("local"),
+    dev: {
+      ...require("./config/base.json").dev,
+      ...loadConfig(envName).dev,
+      ...loadConfig("local").dev,
+    },
+  };
+}
+
+function log(configObj) {
+  const repeatNum = 50;
+  console.log(`${"=".repeat(repeatNum)}\nenvConfig`);
+  console.log(JSON.stringify(configObj, null, 2));
+  console.log(`${"=".repeat(repeatNum)}`);
+}
+
+function loadConfig(configName) {
+  try {
+    return require(`./config/${configName}.json`);
+  } catch (e) {
+    if (e instanceof Error && e.code === "MODULE_NOT_FOUND") {
+      return {};
+    } else {
+      throw e;
+    }
+  }
+}
+
+module.exports = {
+  load,
+  log,
+};

apps/web/config/base.json

@@ -0,0 +1,13 @@
+{
+  "urls": {},
+  "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD",
+  "braintreeKey": "sandbox_r72q8jq6_9pnxkwm75f87sdc2",
+  "paypal": {
+    "businessId": "AD3LAUZSNVPJY",
+    "buttonAction": "https://www.sandbox.paypal.com/cgi-bin/webscr"
+  },
+  "dev": {
+    "port": 8080,
+    "allowedHosts": "auto"
+  }
+}

apps/web/config/cloud.json

@@ -0,0 +1,17 @@
+{
+  "urls": {
+    "icons": "https://icons.bitwarden.net",
+    "notifications": "https://notifications.bitwarden.com"
+  },
+  "stripeKey": "pk_live_bpN0P37nMxrMQkcaHXtAybJk",
+  "braintreeKey": "production_qfbsv8kc_njj2zjtyngtjmbjd",
+  "paypal": {
+    "businessId": "4ZDA7DLUUJGMN",
+    "buttonAction": "https://www.paypal.com/cgi-bin/webscr"
+  },
+  "dev": {
+    "proxyApi": "https://api.bitwarden.com",
+    "proxyIdentity": "https://identity.bitwarden.com",
+    "proxyEvents": "https://events.bitwarden.com"
+  }
+}

apps/web/config/development.json

@@ -0,0 +1,11 @@
+{
+  "urls": {
+    "notifications": "http://localhost:61840"
+  },
+  "dev": {
+    "proxyApi": "http://localhost:4000",
+    "proxyIdentity": "http://localhost:33656",
+    "proxyEvents": "http://localhost:46273",
+    "proxyNotifications": "http://localhost:61840"
+  }
+}

apps/web/config/qa.json

@@ -0,0 +1,11 @@
+{
+  "urls": {
+    "icons": "https://icons.qa.bitwarden.pw",
+    "notifications": "https://notifications.qa.bitwarden.pw"
+  },
+  "dev": {
+    "proxyApi": "https://api.qa.bitwarden.pw",
+    "proxyIdentity": "https://identity.qa.bitwarden.pw",
+    "proxyEvents": "https://events.qa.bitwarden.pw"
+  }
+}

apps/web/config/selfhosted.json

@@ -0,0 +1,9 @@
+{
+  "dev": {
+    "proxyApi": "http://localhost:4001",
+    "proxyIdentity": "http://localhost:33657",
+    "proxyEvents": "http://localhost:46274",
+    "proxyNotifications": "http://localhost:61841",
+    "port": 8081
+  }
+}

apps/web/crowdin.yml

@@ -1,7 +1,9 @@
 project_id_env: _CROWDIN_PROJECT_ID
 api_token_env: CROWDIN_API_TOKEN
+preserve_hierarchy: true
 files:
   - source: /src/locales/en/messages.json
+    dest: /src/locales/en/%file_name%.%file_extension%
     translation: /src/locales/%two_letters_code%/%original_file_name%
     update_option: update_as_unapproved
     languages_mapping:
@@ -13,3 +15,4 @@ files:
         en-GB: en_GB
         en-IN: en_IN
         sr-CY: sr_CY
+        sr-CS: sr_CS

apps/web/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "bitwarden-web",
-  "version": "2.23.0",
+  "name": "@bitwarden/web-vault",
+  "version": "2022.05.0",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {
@@ -29,60 +29,91 @@
     "dist:bit:selfhost": "npm run build:bit:selfhost:prod",
     "deploy": "npm run dist:bit && gh-pages -d build",
     "deploy:dev": "npm run dist:bit && gh-pages -d build -r git@github.com:kspearrin/bitwarden-web-dev.git",
-    "lint": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' || true",
-    "lint:fix": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' --fix"
+    "lint": "eslint . && prettier --check .",
+    "lint:fix": "eslint . --fix",
+    "prettier": "prettier --write .",
+    "prepare": "husky install"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^11.2.11",
-    "@ngtools/webpack": "^11.2.10",
+    "@angular/compiler-cli": "^12.2.13",
+    "@ngtools/webpack": "^12.2.13",
     "@types/jquery": "^3.5.5",
-    "@types/node": "^14.17.2",
+    "@types/node": "^16.11.12",
     "@types/webcrypto": "^0.0.28",
-    "@types/webpack": "^4.4.27",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.4.0",
+    "@types/webpack": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
+    "autoprefixer": "^10.4.2",
+    "buffer": "^6.0.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.3",
-    "del": "^6.0.0",
-    "file-loader": "^6.2.0",
+    "css-loader": "^6.5.1",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.4",
     "gh-pages": "^3.1.0",
-    "html-loader": "^1.3.2",
+    "html-loader": "^3.0.1",
     "html-webpack-injector": "1.1.4",
-    "html-webpack-plugin": "^4.5.1",
-    "mini-css-extract-plugin": "^1.5.0",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.1.2",
+    "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.6",
+    "postcss-loader": "^6.2.1",
+    "prettier": "2.5.1",
+    "process": "^0.11.10",
+    "rimraf": "^3.0.2",
     "sass": "^1.32.10",
-    "sass-loader": "^10.1.1",
-    "style-loader": "^2.0.0",
-    "tapable": "^1.1.3",
-    "terser-webpack-plugin": "^4.2.3",
-    "ts-loader": "^8.1.0",
-    "tslint": "^6.1.3",
-    "tslint-loader": "^3.5.4",
-    "typescript": "4.1.5",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.11.2"
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.18",
+    "terser-webpack-plugin": "^5.2.5",
+    "ts-loader": "^9.2.5",
+    "typescript": "4.3.5",
+    "util": "^0.12.4",
+    "webpack": "^5.64.4",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0"
   },
   "dependencies": {
+    "@angular/animations": "^12.2.13",
+    "@angular/cdk": "^12.2.13",
+    "@angular/common": "^12.2.13",
+    "@angular/compiler": "^12.2.13",
+    "@angular/core": "^12.2.13",
+    "@angular/forms": "^12.2.13",
+    "@angular/platform-browser": "^12.2.13",
+    "@angular/platform-browser-dynamic": "^12.2.13",
+    "@angular/router": "^12.2.13",
     "@bitwarden/jslib-angular": "file:jslib/angular",
     "@bitwarden/jslib-common": "file:jslib/common",
-    "angular2-toaster": "11.0.1",
     "bootstrap": "4.6.0",
-    "braintree-web-drop-in": "1.30.1",
+    "braintree-web-drop-in": "1.33.1",
     "browser-hrtime": "^1.1.8",
     "core-js": "^3.11.0",
     "date-input-polyfill": "^2.14.0",
-    "font-awesome": "4.7.0",
     "jquery": "3.6.0",
+    "jszip": "^3.7.1",
     "ngx-infinite-scroll": "^10.0.1",
+    "ngx-toastr": "14.1.4",
+    "node-forge": "^1.3.1",
     "popper.js": "1.16.1",
     "qrious": "4.0.2",
+    "rxjs": "^7.4.0",
     "sweetalert2": "^10.16.6",
     "webcrypto-shim": "0.1.7",
-    "whatwg-fetch": "3.6.2"
+    "whatwg-fetch": "3.6.2",
+    "zone.js": "0.11.4"
   },
   "engines": {
-    "node": "~14",
-    "npm": "~7"
+    "node": "~16",
+    "npm": "~8"
+  },
+  "lint-staged": {
+    "./!(jslib)**": "prettier --ignore-unknown --write",
+    "*.ts": "eslint --fix",
+    "*.png": "node scripts/optimize.js"
   }
 }

apps/web/postcss.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-undef */
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+};

apps/web/scripts/optimize.js

@@ -0,0 +1,21 @@
+const child_process = require("child_process");
+const path = require("path");
+
+const images = process.argv.slice(2);
+
+images.forEach((img) => {
+  switch (img.split(".").pop()) {
+    case "png":
+      child_process.execSync(
+        `npx @squoosh/cli --oxipng {} --output-dir "${path.dirname(img)}" "${img}"`
+      );
+      break;
+    case "jpg":
+      child_process.execSync(
+        `npx @squoosh/cli --mozjpeg {"quality":85,"baseline":false,"arithmetic":false,"progressive":true,"optimize_coding":true,"smoothing":0,"color_space":3,"quant_table":3,"trellis_multipass":false,"trellis_opt_zero":false,"trellis_opt_table":false,"trellis_loops":1,"auto_subsample":true,"chroma_subsample":2,"separate_chroma_quality":false,"chroma_quality":75} --output-dir "${path.dirname(
+          img
+        )}" "${img}"`
+      );
+      break;
+  }
+});

apps/web/src/404.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link
+      href="/404/bootstrap.min.css"
+      rel="stylesheet"
+      type="text/css"
+      integrity="sha384-hA/ESrxp2b05ywLtD9YwM6m+pNyLRY4+ruk6dWK00SM4k6SQs0bfrITJVSf6uZyH"
+    />
+    <link href="/404/styles.css" rel="stylesheet" type="text/css" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
+    <link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#175DDC" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <title>Page not found!</title>
+    <meta name="description" content="404 Page Not Found" />
+  </head>
+
+  <body>
+    <div class="banner">
+      <div class="container inner banner">
+        <div class="row align-items-center">
+          <div class="col brand">
+            <i class="bwi bwi-shield"></i>&nbsp; <strong>bit</strong>warden
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container inner content">
+      <h2>Page not found!</h2>
+      <p>Sorry, but the page you were looking for could not be found.</p>
+      <p>
+        <a href="/">
+          <img src="/images/404.png" class="img-fluid" alt="404 image" width="80%" />
+        </a>
+      </p>
+      <p>
+        You can <a href="/">return to the web vault</a>, check our
+        <a href="https://status.bitwarden.com/">status page</a> or
+        <a href="https://bitwarden.com/contact/">contact us</a>.
+      </p>
+    </div>
+    <div class="container footer text-muted content">© Copyright 2022 Bitwarden, Inc.</div>
+  </body>
+</html>

apps/web/src/404/styles.css

@@ -0,0 +1,151 @@
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 300;
+  src: url(../fonts/Open_Sans-italic-300.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 400;
+  src: url(../fonts/Open_Sans-italic-400.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 600;
+  src: url(../fonts/Open_Sans-italic-600.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 700;
+  src: url(../fonts/Open_Sans-italic-700.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 800;
+  src: url(../fonts/Open_Sans-italic-800.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  src: url(../fonts/Open_Sans-normal-300.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/Open_Sans-normal-400.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  src: url(../fonts/Open_Sans-normal-600.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  src: url(../fonts/Open_Sans-normal-700.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 800;
+  src: url(../fonts/Open_Sans-normal-800.woff) format("woff");
+  unicode-range: U+0-10FFFF;
+}
+
+body {
+  font-family: "Open Sans";
+}
+
+html,
+body,
+.row {
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+}
+
+h2 {
+  font-size: 25px;
+  margin-bottom: 12.5px;
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.brand {
+  font-size: 23px;
+  line-height: 25px;
+  color: #fff;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.banner {
+  background-color: #175ddc;
+  height: 56px;
+}
+
+.content {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.footer {
+  padding: 40px 0 40px 0;
+  border-top: 1px solid #dee2e6;
+}
+
+/* Bitwarden icons, manually copied */
+
+@font-face {
+  font-family: "bwi-font";
+  src: url(../images/bwi-font.svg) format("svg"), url(../fonts/bwi-font.ttf) format("truetype"),
+    url(../fonts/bwi-font.woff) format("woff"), url(../fonts/bwi-font.woff2) format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.bwi {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "bwi-font" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.bwi-shield:before {
+  content: "\e932";
+}

apps/web/src/abstractions/state.service.ts

@@ -0,0 +1,9 @@
+import { StateService as BaseStateService } from "jslib-common/abstractions/state.service";
+import { StorageOptions } from "jslib-common/models/domain/storageOptions";
+
+import { Account } from "src/models/account";
+
+export abstract class StateService extends BaseStateService<Account> {
+  getRememberEmail: (options?: StorageOptions) => Promise<boolean>;
+  setRememberEmail: (value: boolean, options?: StorageOptions) => Promise<void>;
+}

apps/web/src/app/accounts/accept-emergency.component.html

@@ -0,0 +1,45 @@
+<div class="mt-5 d-flex justify-content-center" *ngIf="loading">
+  <div>
+    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
+    <p class="text-center">
+      <i
+        class="bwi bwi-spinner bwi-spin bwi-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">{{ "emergencyAccess" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <p class="text-center">
+            {{ name }}
+          </p>
+          <p>{{ "acceptEmergencyAccess" | i18n }}</p>
+          <hr />
+          <div class="d-flex">
+            <a
+              routerLink="/login"
+              [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>

apps/web/src/app/accounts/accept-emergency.component.ts

@@ -0,0 +1,55 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { EmergencyAccessAcceptRequest } from "jslib-common/models/request/emergencyAccessAcceptRequest";
+
+import { BaseAcceptComponent } from "../common/base.accept.component";
+
+@Component({
+  selector: "app-accept-emergency",
+  templateUrl: "accept-emergency.component.html",
+})
+export class AcceptEmergencyComponent extends BaseAcceptComponent {
+  name: string;
+
+  protected requiredParameters: string[] = ["id", "name", "email", "token"];
+  protected failedShortMessage = "emergencyInviteAcceptFailedShort";
+  protected failedMessage = "emergencyInviteAcceptFailed";
+
+  constructor(
+    router: Router,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService,
+    route: ActivatedRoute,
+    private apiService: ApiService,
+    stateService: StateService
+  ) {
+    super(router, platformUtilsService, i18nService, route, stateService);
+  }
+
+  async authedHandler(qParams: any): Promise<void> {
+    const request = new EmergencyAccessAcceptRequest();
+    request.token = qParams.token;
+    this.actionPromise = this.apiService.postEmergencyAccessAccept(qParams.id, request);
+    await this.actionPromise;
+    this.platformUtilService.showToast(
+      "success",
+      this.i18nService.t("inviteAccepted"),
+      this.i18nService.t("emergencyInviteAcceptedDesc"),
+      { timeout: 10000 }
+    );
+    this.router.navigate(["/vault"]);
+  }
+
+  async unauthedHandler(qParams: any): Promise<void> {
+    this.name = qParams.name;
+    if (this.name != null) {
+      // Fix URL encoding of space issue with Angular
+      this.name = this.name.replace(/\+/g, " ");
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+<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="bwi bwi-spinner bwi-spin bwi-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="/login"
+              [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>

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

@@ -0,0 +1,126 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { Utils } from "jslib-common/misc/utils";
+import { Policy } from "jslib-common/models/domain/policy";
+import { OrganizationUserAcceptRequest } from "jslib-common/models/request/organizationUserAcceptRequest";
+import { OrganizationUserResetPasswordEnrollmentRequest } from "jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest";
+
+import { BaseAcceptComponent } from "../common/base.accept.component";
+
+@Component({
+  selector: "app-accept-organization",
+  templateUrl: "accept-organization.component.html",
+})
+export class AcceptOrganizationComponent extends BaseAcceptComponent {
+  orgName: string;
+
+  protected requiredParameters: string[] = ["organizationId", "organizationUserId", "token"];
+
+  constructor(
+    router: Router,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService,
+    route: ActivatedRoute,
+    private apiService: ApiService,
+    stateService: StateService,
+    private cryptoService: CryptoService,
+    private policyService: PolicyService,
+    private logService: LogService
+  ) {
+    super(router, platformUtilsService, i18nService, route, stateService);
+  }
+
+  async authedHandler(qParams: any): Promise<void> {
+    const request = new OrganizationUserAcceptRequest();
+    request.token = qParams.token;
+    if (await this.performResetPasswordAutoEnroll(qParams)) {
+      this.actionPromise = this.apiService
+        .postOrganizationUserAccept(qParams.organizationId, qParams.organizationUserId, request)
+        .then(() => {
+          // Retrieve Public Key
+          return this.apiService.getOrganizationKeys(qParams.organizationId);
+        })
+        .then(async (response) => {
+          if (response == null) {
+            throw new Error(this.i18nService.t("resetPasswordOrgKeysError"));
+          }
+
+          const publicKey = Utils.fromB64ToArray(response.publicKey);
+
+          // RSA Encrypt user's encKey.key with organization public key
+          const encKey = await this.cryptoService.getEncKey();
+          const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
+
+          // Create request and execute enrollment
+          const resetRequest = new OrganizationUserResetPasswordEnrollmentRequest();
+          resetRequest.resetPasswordKey = encryptedKey.encryptedString;
+
+          return this.apiService.putOrganizationUserResetPasswordEnrollment(
+            qParams.organizationId,
+            await this.stateService.getUserId(),
+            resetRequest
+          );
+        });
+    } else {
+      this.actionPromise = this.apiService.postOrganizationUserAccept(
+        qParams.organizationId,
+        qParams.organizationUserId,
+        request
+      );
+    }
+
+    await this.actionPromise;
+    this.platformUtilService.showToast(
+      "success",
+      this.i18nService.t("inviteAccepted"),
+      this.i18nService.t("inviteAcceptedDesc"),
+      { timeout: 10000 }
+    );
+
+    await this.stateService.setOrganizationInvitation(null);
+    this.router.navigate(["/vault"]);
+  }
+
+  async unauthedHandler(qParams: any): Promise<void> {
+    this.orgName = qParams.organizationName;
+    if (this.orgName != null) {
+      // Fix URL encoding of space issue with Angular
+      this.orgName = this.orgName.replace(/\+/g, " ");
+    }
+    await this.stateService.setOrganizationInvitation(qParams);
+  }
+
+  private async performResetPasswordAutoEnroll(qParams: any): Promise<boolean> {
+    let policyList: Policy[] = null;
+    try {
+      const policies = await this.apiService.getPoliciesByToken(
+        qParams.organizationId,
+        qParams.token,
+        qParams.email,
+        qParams.organizationUserId
+      );
+      policyList = this.policyService.mapPoliciesFromToken(policies);
+    } catch (e) {
+      this.logService.error(e);
+    }
+
+    if (policyList != null) {
+      const result = this.policyService.getResetPasswordPolicyOptions(
+        policyList,
+        qParams.organizationId
+      );
+      // Return true if policy enabled and auto-enroll enabled
+      return result[1] && result[0].autoEnrollEnabled;
+    }
+
+    return false;
+  }
+}

apps/web/src/app/accounts/hint.component.html

@@ -0,0 +1,44 @@
+<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="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+            </button>
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+              {{ "cancel" | i18n }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

apps/web/src/app/accounts/hint.component.ts

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

apps/web/src/app/accounts/lock.component.html

@@ -0,0 +1,66 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="text-center mb-4">
+        <i class="bwi bwi-lock bwi-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="bwi bwi-lg"
+                  aria-hidden="true"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-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 btn-submit"
+              [disabled]="form.loading"
+            >
+              <span> <i class="bwi bwi-unlock" aria-hidden="true"></i> {{ "unlock" | i18n }} </span>
+              <i
+                class="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+            </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>

apps/web/src/app/accounts/lock.component.ts

@@ -0,0 +1,64 @@
+import { Component, NgZone } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { LockComponent as BaseLockComponent } from "jslib-angular/components/lock.component";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { EnvironmentService } from "jslib-common/abstractions/environment.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { KeyConnectorService } from "jslib-common/abstractions/keyConnector.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
+
+import { RouterService } from "../services/router.service";
+
+@Component({
+  selector: "app-lock",
+  templateUrl: "lock.component.html",
+})
+export class LockComponent extends BaseLockComponent {
+  constructor(
+    router: Router,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    messagingService: MessagingService,
+    cryptoService: CryptoService,
+    vaultTimeoutService: VaultTimeoutService,
+    environmentService: EnvironmentService,
+    private routerService: RouterService,
+    stateService: StateService,
+    apiService: ApiService,
+    logService: LogService,
+    keyConnectorService: KeyConnectorService,
+    ngZone: NgZone
+  ) {
+    super(
+      router,
+      i18nService,
+      platformUtilsService,
+      messagingService,
+      cryptoService,
+      vaultTimeoutService,
+      environmentService,
+      stateService,
+      apiService,
+      logService,
+      keyConnectorService,
+      ngZone
+    );
+  }
+
+  async ngOnInit() {
+    await super.ngOnInit();
+    this.onSuccessfulSubmit = async () => {
+      const previousUrl = this.routerService.getPreviousUrl();
+      if (previousUrl && previousUrl !== "/" && previousUrl.indexOf("lock") === -1) {
+        this.successRoute = previousUrl;
+      }
+      this.router.navigateByUrl(this.successRoute);
+    };
+  }
+}

apps/web/src/app/accounts/login.component.html

@@ -0,0 +1,102 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <img class="mb-2 logo logo-themed" alt="Bitwarden" />
+      <p class="lead text-center mx-4 mb-4">{{ "loginOrCreateNewAccount" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <app-callout
+            type="warning"
+            title="{{ 'resetPasswordPolicyAutoEnroll' | i18n }}"
+            *ngIf="showResetPasswordAutoEnrollWarning"
+          >
+            {{ "resetPasswordAutoEnrollInviteWarning" | 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
+              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="bwi bwi-lg"
+                  aria-hidden="true"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+                ></i>
+              </button>
+            </div>
+            <small class="form-text">
+              <a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
+            </small>
+          </div>
+          <div class="form-check mb-3">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="rememberEmail"
+              name="RememberEmail"
+              [(ngModel)]="rememberEmail"
+            />
+            <label class="form-check-label" for="rememberEmail">{{ "rememberEmail" | i18n }}</label>
+          </div>
+          <div class="mb-n3" [hidden]="!showCaptcha()">
+            <iframe id="hcaptcha_iframe" height="80"></iframe>
+          </div>
+          <hr />
+          <div class="d-flex">
+            <button
+              type="submit"
+              class="btn btn-primary btn-block btn-submit"
+              [disabled]="form.loading"
+            >
+              <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
+              <i
+                class="bwi bwi-spinner bwi-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="bwi bwi-pencil-square" aria-hidden="true"></i>
+              {{ "createAccount" | i18n }}
+            </a>
+          </div>
+          <div class="d-flex">
+            <a routerLink="/sso" class="btn btn-outline-secondary btn-block mt-2">
+              <i class="bwi bwi-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

apps/web/src/app/accounts/login.component.ts

@@ -0,0 +1,179 @@
+import { Component, NgZone } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { first } from "rxjs/operators";
+
+import { LoginComponent as BaseLoginComponent } from "jslib-angular/components/login.component";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { AuthService } from "jslib-common/abstractions/auth.service";
+import { CryptoFunctionService } from "jslib-common/abstractions/cryptoFunction.service";
+import { EnvironmentService } from "jslib-common/abstractions/environment.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { PolicyData } from "jslib-common/models/data/policyData";
+import { MasterPasswordPolicyOptions } from "jslib-common/models/domain/masterPasswordPolicyOptions";
+import { Policy } from "jslib-common/models/domain/policy";
+import { ListResponse } from "jslib-common/models/response/listResponse";
+import { PolicyResponse } from "jslib-common/models/response/policyResponse";
+
+import { StateService } from "../../abstractions/state.service";
+import { RouterService } from "../services/router.service";
+
+@Component({
+  selector: "app-login",
+  templateUrl: "login.component.html",
+})
+export class LoginComponent extends BaseLoginComponent {
+  showResetPasswordAutoEnrollWarning = false;
+  enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
+  policies: ListResponse<PolicyResponse>;
+
+  constructor(
+    authService: AuthService,
+    router: Router,
+    i18nService: I18nService,
+    private route: ActivatedRoute,
+    platformUtilsService: PlatformUtilsService,
+    environmentService: EnvironmentService,
+    passwordGenerationService: PasswordGenerationService,
+    cryptoFunctionService: CryptoFunctionService,
+    private apiService: ApiService,
+    private policyService: PolicyService,
+    logService: LogService,
+    ngZone: NgZone,
+    protected stateService: StateService,
+    private messagingService: MessagingService,
+    private routerService: RouterService
+  ) {
+    super(
+      authService,
+      router,
+      platformUtilsService,
+      i18nService,
+      stateService,
+      environmentService,
+      passwordGenerationService,
+      cryptoFunctionService,
+      logService,
+      ngZone
+    );
+    this.onSuccessfulLogin = async () => {
+      this.messagingService.send("setFullWidth");
+    };
+    this.onSuccessfulLoginNavigate = this.goAfterLogIn;
+  }
+
+  async ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      if (qParams.email != null && qParams.email.indexOf("@") > -1) {
+        this.email = qParams.email;
+      }
+      if (qParams.premium != null) {
+        this.routerService.setPreviousUrl("/settings/premium");
+      } else if (qParams.org != null) {
+        const route = this.router.createUrlTree(["create-organization"], {
+          queryParams: { plan: qParams.org },
+        });
+        this.routerService.setPreviousUrl(route.toString());
+      }
+
+      // Are they coming from an email for sponsoring a families organization
+      if (qParams.sponsorshipToken != null) {
+        const route = this.router.createUrlTree(["setup/families-for-enterprise"], {
+          queryParams: { token: qParams.sponsorshipToken },
+        });
+        this.routerService.setPreviousUrl(route.toString());
+      }
+      await super.ngOnInit();
+      this.rememberEmail = await this.stateService.getRememberEmail();
+    });
+
+    const invite = await this.stateService.getOrganizationInvitation();
+    if (invite != null) {
+      let policyList: Policy[] = null;
+      try {
+        this.policies = await this.apiService.getPoliciesByToken(
+          invite.organizationId,
+          invite.token,
+          invite.email,
+          invite.organizationUserId
+        );
+        policyList = this.policyService.mapPoliciesFromToken(this.policies);
+      } catch (e) {
+        this.logService.error(e);
+      }
+
+      if (policyList != null) {
+        const resetPasswordPolicy = this.policyService.getResetPasswordPolicyOptions(
+          policyList,
+          invite.organizationId
+        );
+        // Set to true if policy enabled and auto-enroll enabled
+        this.showResetPasswordAutoEnrollWarning =
+          resetPasswordPolicy[1] && resetPasswordPolicy[0].autoEnrollEnabled;
+
+        this.enforcedPasswordPolicyOptions =
+          await this.policyService.getMasterPasswordPolicyOptions(policyList);
+      }
+    }
+  }
+
+  async goAfterLogIn() {
+    // Check master password against policy
+    if (this.enforcedPasswordPolicyOptions != null) {
+      const strengthResult = this.passwordGenerationService.passwordStrength(
+        this.masterPassword,
+        this.getPasswordStrengthUserInput()
+      );
+      const masterPasswordScore = strengthResult == null ? null : strengthResult.score;
+
+      // If invalid, save policies and require update
+      if (
+        !this.policyService.evaluateMasterPassword(
+          masterPasswordScore,
+          this.masterPassword,
+          this.enforcedPasswordPolicyOptions
+        )
+      ) {
+        const policiesData: { [id: string]: PolicyData } = {};
+        this.policies.data.map((p) => (policiesData[p.id] = new PolicyData(p)));
+        await this.policyService.replace(policiesData);
+        this.router.navigate(["update-password"]);
+        return;
+      }
+    }
+
+    const previousUrl = this.routerService.getPreviousUrl();
+    if (previousUrl) {
+      this.router.navigateByUrl(previousUrl);
+    } else {
+      this.router.navigate([this.successRoute]);
+    }
+  }
+
+  async submit() {
+    await this.stateService.setRememberEmail(this.rememberEmail);
+    if (!this.rememberEmail) {
+      await this.stateService.setRememberedEmail(null);
+    }
+    await super.submit();
+  }
+
+  private getPasswordStrengthUserInput() {
+    let userInput: string[] = [];
+    const atPosition = this.email.indexOf("@");
+    if (atPosition > -1) {
+      userInput = userInput.concat(
+        this.email
+          .substr(0, atPosition)
+          .trim()
+          .toLowerCase()
+          .split(/[^A-Za-z0-9]/)
+      );
+    }
+    return userInput;
+  }
+}

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

@@ -0,0 +1,44 @@
+<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="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+            </button>
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+              {{ "cancel" | i18n }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,42 @@
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { DeleteRecoverRequest } from "jslib-common/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 platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private logService: LogService
+  ) {}
+
+  async submit() {
+    try {
+      const request = new DeleteRecoverRequest();
+      request.email = this.email.trim().toLowerCase();
+      this.formPromise = this.apiService.postAccountRecoverDelete(request);
+      await this.formPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("deleteRecoverEmailSent")
+      );
+      this.router.navigate(["/"]);
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+}

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

@@ -0,0 +1,76 @@
+<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://bitwarden.com/help/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="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+            </button>
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+              {{ "cancel" | i18n }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,51 @@
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { AuthService } from "jslib-common/abstractions/auth.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { TwoFactorRecoveryRequest } from "jslib-common/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 platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private cryptoService: CryptoService,
+    private authService: AuthService,
+    private logService: LogService
+  ) {}
+
+  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.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("twoStepRecoverDisabled")
+      );
+      this.router.navigate(["/"]);
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+}

apps/web/src/app/accounts/register.component.html

@@ -0,0 +1,355 @@
+<div class="layout" [ngClass]="['layout', layout]">
+  <!-- TEAMS 1 Header -->
+  <header
+    class="header"
+    *ngIf="
+      layout === 'default' ||
+      layout === 'teams' ||
+      layout === 'teams1' ||
+      layout === 'teams2' ||
+      layout === 'enterprise' ||
+      layout === 'enterprise1' ||
+      layout === 'enterprise2' ||
+      layout === 'cnetcmpgnent' ||
+      layout === 'cnetcmpgnteams' ||
+      layout === 'cnetcmpgnind'
+    "
+  >
+    <div class="container">
+      <div class="row">
+        <div class="col-7">
+          <img
+            alt="Bitwarden"
+            class="logo mb-2"
+            src="../../images/register-layout/logo-horizontal-white.svg"
+          />
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+    <div class="row">
+      <div class="col-7" *ngIf="layout">
+        <div class="mt-5">
+          <!-- Default Body -->
+          <div
+            *ngIf="
+              layout === 'teams' ||
+              layout === 'enterprise' ||
+              layout === 'enterprise1' ||
+              layout === 'default'
+            "
+          >
+            <h1>The Bitwarden Password Manager</h1>
+            <h2>
+              Trusted by millions of individuals, teams, and organizations worldwide for secure
+              password storage and sharing.
+            </h2>
+            <p>Store logins, secure notes, and more</p>
+            <p>Collaborate and share securely</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
+          </div>
+
+          <!-- Teams & Enterprise Body -->
+          <div *ngIf="layout === 'teams1' || layout === 'teams2' || layout === 'enterprise2'">
+            <h1>
+              Start Your <span *ngIf="layout === 'teams1' || layout === 'teams1'">Teams<br /></span
+              ><span *ngIf="layout === 'enterprise2'">Enterprise</span> Free Trial Now
+            </h1>
+            <h2>
+              Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure
+              password storage and sharing.
+            </h2>
+            <p>Collaborate and share securely</p>
+            <p>Deploy and manage quickly and easily</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
+          </div>
+
+          <!-- CNET Campaign Teams & Enterprise Body -->
+          <div *ngIf="layout === 'cnetcmpgnteams' || layout === 'cnetcmpgnent'">
+            <h1>
+              Start Your <span *ngIf="layout === 'cnetcmpgnteams'">Teams<br /></span
+              ><span *ngIf="layout === 'cnetcmpgnent'">Enterprise</span> Free Trial Now
+            </h1>
+            <h2>
+              Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure
+              password storage and sharing.
+            </h2>
+            <p>Collaborate and share securely</p>
+            <p>Deploy and manage quickly and easily</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
+          </div>
+
+          <!-- CNET Campaign Premium Body -->
+          <div *ngIf="layout === 'cnetcmpgnind'">
+            <h1>Start Your Premium Account Now</h1>
+            <h2>
+              Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure
+              password storage and sharing.
+            </h2>
+            <p>Store logins, secure notes, and more</p>
+            <p>Secure your account with advanced two-step login</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
+          </div>
+        </div>
+      </div>
+      <div [ngClass]="{ 'col-5': layout, 'col-12': !layout }">
+        <div class="row justify-content-md-center mt-5">
+          <div [ngClass]="{ 'col-5': !layout, 'col-12': layout }">
+            <h1 class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</h1>
+            <div class="card d-block">
+              <div class="card-body">
+                <app-callout
+                  title="{{ 'createOrganizationStep1' | i18n }}"
+                  type="info"
+                  icon="bwi bwi-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"
+                    [enforcedPolicyOptions]="enforcedPolicyOptions"
+                    *ngIf="enforcedPolicyOptions"
+                  >
+                  </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="bwi bwi-lg"
+                          aria-hidden="true"
+                          [ngClass]="{
+                            'bwi-eye': !showPassword,
+                            'bwi-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="bwi bwi-lg"
+                        aria-hidden="true"
+                        [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-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>
+                <div [hidden]="!showCaptcha()">
+                  <iframe id="hcaptcha_iframe" height="80"></iframe>
+                </div>
+                <div class="form-group" *ngIf="showTerms">
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      id="acceptPolicies"
+                      [(ngModel)]="acceptPolicies"
+                      name="AcceptPolicies"
+                    />
+                    <label class="form-check-label small text-muted" for="acceptPolicies">
+                      {{ "acceptPolicies" | i18n }}<br />
+                      <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>
+                    </label>
+                  </div>
+                </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="bwi bwi-spinner bwi-spin"
+                      title="{{ 'loading' | i18n }}"
+                      aria-hidden="true"
+                    ></i>
+                  </button>
+                  <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                    {{ "cancel" | i18n }}
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-7 d-flex align-items-center">
+        <div
+          *ngIf="
+            layout === 'cnetcmpgnent' || layout === 'cnetcmpgnteams' || layout === 'cnetcmpgnind'
+          "
+        >
+          <figure>
+            <figcaption>
+              <cite>
+                <img
+                  src="../../images/register-layout/cnet-logo.svg"
+                  class="w-25 d-block mx-auto"
+                  alt="cnet logo"
+                />
+              </cite>
+            </figcaption>
+            <blockquote class="mx-auto text-center px-4">
+              "No more excuses; start using Bitwarden today. The identity you save could be your
+              own. The money definitely will be."
+            </blockquote>
+          </figure>
+        </div>
+
+        <div
+          *ngIf="
+            layout === 'teams' ||
+            layout === 'teams1' ||
+            layout === 'teams2' ||
+            layout === 'enterprise' ||
+            layout === 'enterprise1' ||
+            layout === 'enterprise2' ||
+            layout === 'default'
+          "
+        >
+          <figure>
+            <figcaption>
+              <cite>
+                <img
+                  src="../../images/register-layout/forbes-logo.svg"
+                  class="w-25 d-block mx-auto"
+                  alt="Forbes Logo"
+                />
+              </cite>
+            </figcaption>
+            <blockquote class="mx-auto text-center px-4">
+              “Bitwarden boasts the backing of some of the world's best security experts and an
+              attractive, easy-to-use interface”
+            </blockquote>
+          </figure>
+        </div>
+      </div>
+      <div
+        *ngIf="
+          layout === 'cnetcmpgnent' || layout === 'cnetcmpgnteams' || layout === 'cnetcmpgnind'
+        "
+        class="col-5 d-flex align-items-center justify-content-center"
+      >
+        <img
+          src="../../images/register-layout/usnews-360-badge.svg"
+          class="w-50 d-block"
+          alt="US News 360 Reviews Best Password Manager"
+        />
+      </div>
+      <div
+        *ngIf="
+          layout === 'teams' ||
+          layout === 'teams1' ||
+          layout === 'teams2' ||
+          layout === 'enterprise' ||
+          layout === 'enterprise1' ||
+          layout === 'enterprise2' ||
+          layout === 'default'
+        "
+        class="col-5 d-flex align-items-center justify-content-center"
+      >
+        <img
+          src="../../images/register-layout/usnews-360-badge.svg"
+          class="w-50 d-block"
+          alt="US News 360 Reviews Best Password Manager"
+        />
+      </div>
+    </div>
+  </form>
+</div>

apps/web/src/app/accounts/register.component.ts

@@ -0,0 +1,149 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { first } from "rxjs/operators";
+
+import { RegisterComponent as BaseRegisterComponent } from "jslib-angular/components/register.component";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { AuthService } from "jslib-common/abstractions/auth.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { EnvironmentService } from "jslib-common/abstractions/environment.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { PolicyData } from "jslib-common/models/data/policyData";
+import { MasterPasswordPolicyOptions } from "jslib-common/models/domain/masterPasswordPolicyOptions";
+import { Policy } from "jslib-common/models/domain/policy";
+import { ReferenceEventRequest } from "jslib-common/models/request/referenceEventRequest";
+
+import { RouterService } from "../services/router.service";
+
+@Component({
+  selector: "app-register",
+  templateUrl: "register.component.html",
+})
+export class RegisterComponent extends BaseRegisterComponent {
+  showCreateOrgMessage = false;
+  layout = "";
+  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,
+    environmentService: EnvironmentService,
+    logService: LogService,
+    private routerService: RouterService
+  ) {
+    super(
+      authService,
+      router,
+      i18nService,
+      cryptoService,
+      apiService,
+      stateService,
+      platformUtilsService,
+      passwordGenerationService,
+      environmentService,
+      logService
+    );
+  }
+
+  async ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe((qParams) => {
+      this.referenceData = new ReferenceEventRequest();
+      if (qParams.email != null && qParams.email.indexOf("@") > -1) {
+        this.email = qParams.email;
+      }
+      if (qParams.premium != null) {
+        this.routerService.setPreviousUrl("/settings/premium");
+      } else if (qParams.org != null) {
+        this.showCreateOrgMessage = true;
+        this.referenceData.flow = qParams.org;
+        const route = this.router.createUrlTree(["create-organization"], {
+          queryParams: { plan: qParams.org },
+        });
+        this.routerService.setPreviousUrl(route.toString());
+      }
+      if (qParams.layout != null) {
+        this.layout = this.referenceData.layout = qParams.layout;
+      }
+      if (qParams.reference != null) {
+        this.referenceData.id = qParams.reference;
+      } else {
+        this.referenceData.id = ("; " + document.cookie)
+          .split("; reference=")
+          .pop()
+          .split(";")
+          .shift();
+      }
+      // Are they coming from an email for sponsoring a families organization
+      if (qParams.sponsorshipToken != null) {
+        // After logging in redirect them to setup the families sponsorship
+        const route = this.router.createUrlTree(["setup/families-for-enterprise"], {
+          queryParams: { plan: qParams.sponsorshipToken },
+        });
+        this.routerService.setPreviousUrl(route.toString());
+      }
+      if (this.referenceData.id === "") {
+        this.referenceData.id = null;
+      }
+    });
+    const invite = await this.stateService.getOrganizationInvitation();
+    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 (e) {
+        this.logService.error(e);
+      }
+    }
+
+    if (this.policies != null) {
+      this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions(
+        this.policies
+      );
+    }
+
+    await super.ngOnInit();
+  }
+
+  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();
+  }
+}

apps/web/src/app/accounts/remove-password.component.html

@@ -0,0 +1,55 @@
+<div class="mt-5 d-flex justify-content-center" *ngIf="loading">
+  <div>
+    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
+    <p class="text-center">
+      <i
+        class="bwi bwi-spinner bwi-spin bwi-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">
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "removeMasterPassword" | i18n }}</p>
+      <hr />
+      <div class="card d-block">
+        <div class="card-body">
+          <p>{{ "convertOrganizationEncryptionDesc" | i18n: organization.name }}</p>
+
+          <button
+            type="button"
+            class="btn btn-primary btn-block"
+            (click)="convert()"
+            [disabled]="actionPromise"
+          >
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+              *ngIf="continuing"
+            ></i>
+            {{ "removeMasterPassword" | i18n }}
+          </button>
+          <button
+            type="button"
+            class="btn btn-outline-secondary btn-block"
+            (click)="leave()"
+            [disabled]="actionPromise"
+          >
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+              *ngIf="leaving"
+            ></i>
+            {{ "leaveOrganization" | i18n }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

apps/web/src/app/accounts/remove-password.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { RemovePasswordComponent as BaseRemovePasswordComponent } from "jslib-angular/components/remove-password.component";
+
+@Component({
+  selector: "app-remove-password",
+  templateUrl: "remove-password.component.html",
+})
+export class RemovePasswordComponent extends BaseRemovePasswordComponent {}

apps/web/src/app/accounts/set-password.component.html

@@ -0,0 +1,117 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "setMasterPassword" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body text-center" *ngIf="syncLoading">
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          {{ "loading" | i18n }}
+        </div>
+        <div class="card-body" *ngIf="!syncLoading">
+          <app-callout type="info">{{ "ssoCompleteRegistration" | i18n }}</app-callout>
+          <app-callout
+            type="warning"
+            title="{{ 'resetPasswordPolicyAutoEnroll' | i18n }}"
+            *ngIf="resetPasswordAutoEnroll"
+          >
+            {{ "resetPasswordAutoEnrollInviteWarning" | i18n }}
+          </app-callout>
+          <div class="form-group">
+            <app-callout
+              type="info"
+              [enforcedPolicyOptions]="enforcedPolicyOptions"
+              *ngIf="enforcedPolicyOptions"
+            >
+            </app-callout>
+            <label for="masterPassword">{{ "masterPass" | i18n }}</label>
+            <div class="d-flex">
+              <div class="w-100">
+                <input
+                  id="masterPassword"
+                  type="{{ showPassword ? 'text' : 'password' }}"
+                  name="MasterPasswordHash"
+                  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="bwi bwi-lg"
+                    aria-hidden="true"
+                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-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)]="masterPasswordRetype"
+                required
+                appInputVerbatim
+              />
+              <button
+                type="button"
+                class="ml-1 btn btn-link"
+                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                (click)="togglePassword(true)"
+              >
+                <i
+                  class="bwi bwi-lg"
+                  aria-hidden="true"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-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">
+            <button
+              type="submit"
+              class="btn btn-primary btn-block btn-submit"
+              [disabled]="form.loading"
+            >
+              <i
+                class="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span>{{ "submit" | i18n }}</span>
+            </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>

apps/web/src/app/accounts/set-password.component.ts

@@ -0,0 +1,47 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+import { SetPasswordComponent as BaseSetPasswordComponent } from "jslib-angular/components/set-password.component";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
+
+@Component({
+  selector: "app-set-password",
+  templateUrl: "set-password.component.html",
+})
+export class SetPasswordComponent extends BaseSetPasswordComponent {
+  constructor(
+    apiService: ApiService,
+    i18nService: I18nService,
+    cryptoService: CryptoService,
+    messagingService: MessagingService,
+    passwordGenerationService: PasswordGenerationService,
+    platformUtilsService: PlatformUtilsService,
+    policyService: PolicyService,
+    router: Router,
+    syncService: SyncService,
+    route: ActivatedRoute,
+    stateService: StateService
+  ) {
+    super(
+      i18nService,
+      cryptoService,
+      messagingService,
+      passwordGenerationService,
+      platformUtilsService,
+      policyService,
+      router,
+      apiService,
+      syncService,
+      route,
+      stateService
+    );
+  }
+}

apps/web/src/app/accounts/sso.component.html

@@ -0,0 +1,52 @@
+<form
+  #form
+  (ngSubmit)="submit()"
+  class="container"
+  [appApiAction]="initiateSsoFormPromise"
+  ngNativeValidate
+>
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <img class="logo mb-2 logo-themed" alt="Bitwarden" />
+      <div class="card d-block mt-4">
+        <div class="card-body" *ngIf="loggingIn">
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          {{ "loading" | i18n }}
+        </div>
+        <div class="card-body" *ngIf="!loggingIn">
+          <p>{{ "ssoLogInWithOrgIdentifier" | i18n }}</p>
+          <div class="form-group">
+            <label for="identifier">{{ "organizationIdentifier" | i18n }}</label>
+            <input
+              id="identifier"
+              class="form-control"
+              type="text"
+              name="Identifier"
+              [(ngModel)]="identifier"
+              required
+              appAutofocus
+            />
+          </div>
+          <hr />
+          <div class="d-flex">
+            <button
+              type="submit"
+              class="btn btn-primary btn-block btn-submit"
+              [disabled]="form.loading"
+            >
+              <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
+              <i
+                class="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+            </button>
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+              {{ "cancel" | i18n }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

apps/web/src/app/accounts/sso.component.ts

@@ -0,0 +1,72 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { first } from "rxjs/operators";
+
+import { SsoComponent as BaseSsoComponent } from "jslib-angular/components/sso.component";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { AuthService } from "jslib-common/abstractions/auth.service";
+import { CryptoFunctionService } from "jslib-common/abstractions/cryptoFunction.service";
+import { EnvironmentService } from "jslib-common/abstractions/environment.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+
+@Component({
+  selector: "app-sso",
+  templateUrl: "sso.component.html",
+})
+export class SsoComponent extends BaseSsoComponent {
+  constructor(
+    authService: AuthService,
+    router: Router,
+    i18nService: I18nService,
+    route: ActivatedRoute,
+    stateService: StateService,
+    platformUtilsService: PlatformUtilsService,
+    apiService: ApiService,
+    cryptoFunctionService: CryptoFunctionService,
+    environmentService: EnvironmentService,
+    passwordGenerationService: PasswordGenerationService,
+    logService: LogService
+  ) {
+    super(
+      authService,
+      router,
+      i18nService,
+      route,
+      stateService,
+      platformUtilsService,
+      apiService,
+      cryptoFunctionService,
+      environmentService,
+      passwordGenerationService,
+      logService
+    );
+    this.redirectUri = window.location.origin + "/sso-connector.html";
+    this.clientId = "web";
+  }
+
+  async ngOnInit() {
+    super.ngOnInit();
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      if (qParams.identifier != null) {
+        this.identifier = qParams.identifier;
+      } else {
+        const storedIdentifier = await this.stateService.getSsoOrgIdentifier();
+        if (storedIdentifier != null) {
+          this.identifier = storedIdentifier;
+        }
+      }
+    });
+  }
+
+  async submit() {
+    await this.stateService.setSsoOrganizationIdentifier(this.identifier);
+    if (this.clientId === "browser") {
+      document.cookie = `ssoHandOffMessage=${this.i18nService.t("ssoHandOff")};SameSite=strict`;
+    }
+    super.submit();
+  }
+}

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

@@ -0,0 +1,68 @@
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
+  <div class="modal-dialog modal-dialog-scrollable modal-lg" 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="modal-body">
+        <div class="list-group list-group-flush-2fa">
+          <div *ngFor="let p of providers" class="list-group-item list-group-item-action">
+            <div class="two-factor-content">
+              <div class="logo-col">
+                <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'" />
+              </div>
+              <div class="text-col">
+                <h3>{{ p.name }}</h3>
+                {{ p.description }}
+              </div>
+              <div class="btn-col">
+                <button
+                  [attr.aria-describedby]="p.name"
+                  type="button"
+                  class="btn btn-outline-secondary btn-sm"
+                  (click)="choose(p)"
+                >
+                  {{ "select" | i18n }}
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="list-group-item list-group-item-action" (click)="recover()">
+            <div class="two-factor-content">
+              <div class="logo-col">
+                <img class="recovery-code-img" alt="rc logo" />
+              </div>
+              <div class="text-col">
+                <h3>{{ "recoveryCodeTitle" | i18n }}</h3>
+                {{ "recoveryCodeDesc" | i18n }}
+              </div>
+              <div class="btn-col">
+                <button
+                  [attr.aria-descibedby]="'recoveryCodeTitle' | i18n"
+                  type="button"
+                  class="btn btn-outline-secondary btn-sm"
+                  (click)="recover()"
+                >
+                  {{ "select" | i18n }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "close" | i18n }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,155 @@
+<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>
+            <picture>
+              <source srcset="../../images/yubikey.avif" type="image/avif" />
+              <source srcset="../../images/yubikey.webp" type="image/webp" />
+              <img src="../../images/yubikey.jpg" class="rounded img-fluid mb-3" alt="" />
+            </picture>
+            <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.WebAuthn">
+            <div id="web-authn-frame" class="mb-3">
+              <iframe id="webauthn_iframe" [allow]="webAuthnAllow"></iframe>
+            </div>
+          </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="bwi bwi-spinner text-muted bwi-spin pull-right"
+            title="{{ 'loading' | i18n }}"
+            *ngIf="form.loading && selectedProviderType === providerType.WebAuthn"
+            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 [hidden]="!showCaptcha()">
+            <iframe id="hcaptcha_iframe" height="80"></iframe>
+          </div>
+          <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.WebAuthn
+              "
+            >
+              <span>
+                <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
+              </span>
+              <i
+                class="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+            </button>
+            <a routerLink="/login" 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>

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

@@ -0,0 +1,90 @@
+import { Component, ViewChild, ViewContainerRef } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+import { TwoFactorComponent as BaseTwoFactorComponent } from "jslib-angular/components/two-factor.component";
+import { ModalService } from "jslib-angular/services/modal.service";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { AppIdService } from "jslib-common/abstractions/appId.service";
+import { AuthService } from "jslib-common/abstractions/auth.service";
+import { EnvironmentService } from "jslib-common/abstractions/environment.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { TwoFactorService } from "jslib-common/abstractions/twoFactor.service";
+import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
+
+import { RouterService } from "../services/router.service";
+
+import { TwoFactorOptionsComponent } from "./two-factor-options.component";
+
+@Component({
+  selector: "app-two-factor",
+  templateUrl: "two-factor.component.html",
+})
+export class TwoFactorComponent extends BaseTwoFactorComponent {
+  @ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
+  twoFactorOptionsModal: ViewContainerRef;
+
+  constructor(
+    authService: AuthService,
+    router: Router,
+    i18nService: I18nService,
+    apiService: ApiService,
+    platformUtilsService: PlatformUtilsService,
+    stateService: StateService,
+    environmentService: EnvironmentService,
+    private modalService: ModalService,
+    route: ActivatedRoute,
+    logService: LogService,
+    twoFactorService: TwoFactorService,
+    appIdService: AppIdService,
+    private routerService: RouterService
+  ) {
+    super(
+      authService,
+      router,
+      i18nService,
+      apiService,
+      platformUtilsService,
+      window,
+      environmentService,
+      stateService,
+      route,
+      logService,
+      twoFactorService,
+      appIdService
+    );
+    this.onSuccessfulLoginNavigate = this.goAfterLogIn;
+  }
+
+  async anotherMethod() {
+    const [modal] = await this.modalService.openViewRef(
+      TwoFactorOptionsComponent,
+      this.twoFactorOptionsModal,
+      (comp) => {
+        comp.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
+          modal.close();
+          this.selectedProviderType = provider;
+          await this.init();
+        });
+        comp.onRecoverSelected.subscribe(() => {
+          modal.close();
+        });
+      }
+    );
+  }
+
+  async goAfterLogIn() {
+    const previousUrl = this.routerService.getPreviousUrl();
+    if (previousUrl) {
+      this.router.navigateByUrl(previousUrl);
+    } else {
+      this.router.navigate([this.successRoute], {
+        queryParams: {
+          identifier: this.identifier,
+        },
+      });
+    }
+  }
+}

apps/web/src/app/accounts/update-password.component.html

@@ -0,0 +1,90 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-4">
+      <p class="lead text-center mb-4">{{ "updateMasterPassword" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <app-callout type="warning">{{ "masterPasswordInvalidWarning" | i18n }} </app-callout>
+          <app-callout
+            type="info"
+            [enforcedPolicyOptions]="enforcedPolicyOptions"
+            *ngIf="enforcedPolicyOptions"
+          ></app-callout>
+
+          <form
+            #form
+            (ngSubmit)="submit()"
+            [appApiAction]="formPromise"
+            ngNativeValidate
+            autocomplete="off"
+          >
+            <div class="row">
+              <div class="col-6">
+                <div class="form-group">
+                  <label for="currentMasterPassword">{{ "currentMasterPass" | i18n }}</label>
+                  <input
+                    id="currentMasterPassword"
+                    type="password"
+                    name="MasterPasswordHash"
+                    class="form-control"
+                    [(ngModel)]="currentMasterPassword"
+                    required
+                    appInputVerbatim
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-6">
+                <div class="form-group">
+                  <label for="newMasterPassword">{{ "newMasterPass" | i18n }}</label>
+                  <input
+                    id="newMasterPassword"
+                    type="password"
+                    name="NewMasterPasswordHash"
+                    class="form-control mb-1"
+                    [(ngModel)]="masterPassword"
+                    (input)="updatePasswordStrength()"
+                    required
+                    appInputVerbatim
+                    autocomplete="new-password"
+                  />
+                  <app-password-strength
+                    [score]="masterPasswordScore"
+                    [showText]="true"
+                  ></app-password-strength>
+                </div>
+              </div>
+              <div class="col-6">
+                <div class="form-group">
+                  <label for="masterPasswordRetype">{{ "confirmNewMasterPass" | i18n }}</label>
+                  <input
+                    id="masterPasswordRetype"
+                    type="password"
+                    name="MasterPasswordRetype"
+                    class="form-control"
+                    [(ngModel)]="masterPasswordRetype"
+                    required
+                    appInputVerbatim
+                    autocomplete="new-password"
+                  />
+                </div>
+              </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>{{ "changeMasterPassword" | i18n }}</span>
+            </button>
+            <button (click)="cancel()" type="button" class="btn btn-outline-secondary">
+              <span>{{ "cancel" | i18n }}</span>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

apps/web/src/app/accounts/update-password.component.ts

@@ -0,0 +1,48 @@
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { UpdatePasswordComponent as BaseUpdatePasswordComponent } from "jslib-angular/components/update-password.component";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { UserVerificationService } from "jslib-common/abstractions/userVerification.service";
+
+@Component({
+  selector: "app-update-password",
+  templateUrl: "update-password.component.html",
+})
+export class UpdatePasswordComponent extends BaseUpdatePasswordComponent {
+  constructor(
+    router: Router,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    passwordGenerationService: PasswordGenerationService,
+    policyService: PolicyService,
+    cryptoService: CryptoService,
+    messagingService: MessagingService,
+    apiService: ApiService,
+    logService: LogService,
+    stateService: StateService,
+    userVerificationService: UserVerificationService
+  ) {
+    super(
+      router,
+      i18nService,
+      platformUtilsService,
+      passwordGenerationService,
+      policyService,
+      cryptoService,
+      messagingService,
+      apiService,
+      stateService,
+      userVerificationService,
+      logService
+    );
+  }
+}

apps/web/src/app/accounts/update-temp-password.component.html

@@ -0,0 +1,105 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-4">
+      <p class="lead text-center mb-4">{{ "updateMasterPassword" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <app-callout type="warning">{{ "updateMasterPasswordWarning" | i18n }} </app-callout>
+          <div class="form-group">
+            <app-callout
+              type="info"
+              [enforcedPolicyOptions]="enforcedPolicyOptions"
+              *ngIf="enforcedPolicyOptions"
+            >
+            </app-callout>
+            <label for="masterPassword">{{ "masterPass" | i18n }}</label>
+            <div class="d-flex">
+              <div class="w-100">
+                <input
+                  id="masterPassword"
+                  type="{{ showPassword ? 'text' : 'password' }}"
+                  name="MasterPasswordHash"
+                  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="bwi bwi-lg"
+                    aria-hidden="true"
+                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+                  ></i>
+                </button>
+                <div class="progress-bar invisible"></div>
+              </div>
+            </div>
+          </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)]="masterPasswordRetype"
+                required
+                appInputVerbatim
+              />
+              <button
+                type="button"
+                class="ml-1 btn btn-link"
+                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                (click)="togglePassword(true)"
+              >
+                <i
+                  class="bwi bwi-lg"
+                  aria-hidden="true"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-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">
+            <button
+              type="submit"
+              class="btn btn-primary btn-block btn-submit"
+              [disabled]="form.loading"
+            >
+              <i
+                class="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span>{{ "submit" | i18n }}</span>
+            </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>

apps/web/src/app/accounts/update-temp-password.component.ts

@@ -0,0 +1,45 @@
+import { Component } from "@angular/core";
+
+import { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from "jslib-angular/components/update-temp-password.component";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
+
+@Component({
+  selector: "app-update-temp-password",
+  templateUrl: "update-temp-password.component.html",
+})
+export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent {
+  constructor(
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    passwordGenerationService: PasswordGenerationService,
+    policyService: PolicyService,
+    cryptoService: CryptoService,
+    messagingService: MessagingService,
+    apiService: ApiService,
+    logService: LogService,
+    stateService: StateService,
+    syncService: SyncService
+  ) {
+    super(
+      i18nService,
+      platformUtilsService,
+      passwordGenerationService,
+      policyService,
+      cryptoService,
+      messagingService,
+      apiService,
+      stateService,
+      syncService,
+      logService
+    );
+  }
+}

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

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

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

@@ -0,0 +1,48 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { first } from "rxjs/operators";
+
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { VerifyEmailRequest } from "jslib-common/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 platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private route: ActivatedRoute,
+    private apiService: ApiService,
+    private logService: LogService,
+    private stateService: StateService
+  ) {}
+
+  ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      if (qParams.userId != null && qParams.token != null) {
+        try {
+          await this.apiService.postAccountVerifyEmailToken(
+            new VerifyEmailRequest(qParams.userId, qParams.token)
+          );
+          if (await this.stateService.getIsAuthenticated()) {
+            await this.apiService.refreshIdentityToken();
+          }
+          this.platformUtilsService.showToast("success", null, this.i18nService.t("emailVerified"));
+          this.router.navigate(["/"]);
+          return;
+        } catch (e) {
+          this.logService.error(e);
+        }
+      }
+      this.platformUtilsService.showToast("error", null, this.i18nService.t("emailVerifiedFailed"));
+      this.router.navigate(["/"]);
+    });
+  }
+}

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

@@ -0,0 +1,34 @@
+<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="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+            </button>
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+              {{ "cancel" | i18n }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,58 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { first } from "rxjs/operators";
+
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { VerifyDeleteRecoverRequest } from "jslib-common/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 platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private route: ActivatedRoute,
+    private logService: LogService
+  ) {}
+
+  ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      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.platformUtilsService.showToast(
+        "success",
+        this.i18nService.t("accountDeleted"),
+        this.i18nService.t("accountDeletedDesc")
+      );
+      this.router.navigate(["/"]);
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+}

apps/web/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

apps/web/src/app/app.component.ts

@@ -0,0 +1,315 @@
+import { Component, NgZone, OnDestroy, OnInit, SecurityContext } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { NavigationEnd, Router } from "@angular/router";
+import * as jq from "jquery";
+import { IndividualConfig, ToastrService } from "ngx-toastr";
+import Swal from "sweetalert2";
+
+import { AuthService } from "jslib-common/abstractions/auth.service";
+import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
+import { CipherService } from "jslib-common/abstractions/cipher.service";
+import { CollectionService } from "jslib-common/abstractions/collection.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { EventService } from "jslib-common/abstractions/event.service";
+import { FolderService } from "jslib-common/abstractions/folder.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { KeyConnectorService } from "jslib-common/abstractions/keyConnector.service";
+import { NotificationsService } from "jslib-common/abstractions/notifications.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { SearchService } from "jslib-common/abstractions/search.service";
+import { SettingsService } from "jslib-common/abstractions/settings.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
+import { TokenService } from "jslib-common/abstractions/token.service";
+import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
+
+import { DisableSendPolicy } from "./organizations/policies/disable-send.component";
+import { MasterPasswordPolicy } from "./organizations/policies/master-password.component";
+import { PasswordGeneratorPolicy } from "./organizations/policies/password-generator.component";
+import { PersonalOwnershipPolicy } from "./organizations/policies/personal-ownership.component";
+import { RequireSsoPolicy } from "./organizations/policies/require-sso.component";
+import { ResetPasswordPolicy } from "./organizations/policies/reset-password.component";
+import { SendOptionsPolicy } from "./organizations/policies/send-options.component";
+import { SingleOrgPolicy } from "./organizations/policies/single-org.component";
+import { TwoFactorAuthenticationPolicy } from "./organizations/policies/two-factor-authentication.component";
+import { PolicyListService } from "./services/policy-list.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 {
+  private lastActivity: number = null;
+  private idleTimer: number = null;
+  private isIdle = false;
+
+  constructor(
+    private broadcasterService: BroadcasterService,
+    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 toastrService: ToastrService,
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private ngZone: NgZone,
+    private vaultTimeoutService: VaultTimeoutService,
+    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,
+    protected policyListService: PolicyListService,
+    private keyConnectorService: KeyConnectorService
+  ) {}
+
+  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":
+            this.notificationsService.updateConnection(false);
+            break;
+          case "loggedOut":
+            this.routerService.setPreviousUrl(null);
+            this.notificationsService.updateConnection(false);
+            break;
+          case "unlocked":
+            this.notificationsService.updateConnection(false);
+            break;
+          case "authBlocked":
+            this.routerService.setPreviousUrl(message.url);
+            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":
+            this.routerService.setPreviousUrl(message.url);
+            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 "emailVerificationRequired": {
+            const emailVerificationConfirmed = await this.platformUtilsService.showDialog(
+              this.i18nService.t("emailVerificationRequiredDesc"),
+              this.i18nService.t("emailVerificationRequired"),
+              this.i18nService.t("learnMore"),
+              this.i18nService.t("cancel")
+            );
+            if (emailVerificationConfirmed) {
+              this.platformUtilsService.launchUri(
+                "https://bitwarden.com/help/create-bitwarden-account/"
+              );
+            }
+            break;
+          }
+          case "showToast":
+            this.showToast(message);
+            break;
+          case "setFullWidth":
+            this.setFullWidth();
+            break;
+          case "convertAccountToKeyConnector":
+            this.router.navigate(["/remove-password"]);
+            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);
+        }
+      }
+    });
+
+    this.policyListService.addPolicies([
+      new TwoFactorAuthenticationPolicy(),
+      new MasterPasswordPolicy(),
+      new PasswordGeneratorPolicy(),
+      new SingleOrgPolicy(),
+      new RequireSsoPolicy(),
+      new PersonalOwnershipPolicy(),
+      new DisableSendPolicy(),
+      new SendOptionsPolicy(),
+      new ResetPasswordPolicy(),
+    ]);
+
+    this.setFullWidth();
+  }
+
+  ngOnDestroy() {
+    this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+  }
+
+  private async logOut(expired: boolean) {
+    await this.eventService.uploadEvents();
+    const userId = await this.stateService.getUserId();
+    await Promise.all([
+      this.eventService.clearEvents(),
+      this.syncService.setLastSync(new Date(0)),
+      this.cryptoService.clearKeys(),
+      this.settingsService.clear(userId),
+      this.cipherService.clear(userId),
+      this.folderService.clear(userId),
+      this.collectionService.clear(userId),
+      this.policyService.clear(userId),
+      this.passwordGenerationService.clear(),
+      this.keyConnectorService.clear(),
+    ]);
+
+    this.searchService.clearIndex();
+    this.authService.logOut(async () => {
+      if (expired) {
+        this.platformUtilsService.showToast(
+          "warning",
+          this.i18nService.t("loggedOut"),
+          this.i18nService.t("loginExpired")
+        );
+      }
+
+      await this.stateService.clean({ userId: userId });
+      Swal.close();
+      this.router.navigate(["/"]);
+    });
+  }
+
+  private async recordActivity() {
+    const now = new Date().getTime();
+    if (this.lastActivity != null && now - this.lastActivity < 250) {
+      return;
+    }
+
+    this.lastActivity = now;
+    this.stateService.setLastActive(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) {
+    let message = "";
+
+    const options: Partial<IndividualConfig> = {};
+
+    if (typeof msg.text === "string") {
+      message = msg.text;
+    } else if (msg.text.length === 1) {
+      message = msg.text[0];
+    } else {
+      msg.text.forEach(
+        (t: string) =>
+          (message += "<p>" + this.sanitizer.sanitize(SecurityContext.HTML, t) + "</p>")
+      );
+      options.enableHtml = true;
+    }
+    if (msg.options != null) {
+      if (msg.options.trustedHtml === true) {
+        options.enableHtml = true;
+      }
+      if (msg.options.timeout != null && msg.options.timeout > 0) {
+        options.timeOut = msg.options.timeout;
+      }
+    }
+
+    this.toastrService.show(message, msg.title, options, "toast-" + msg.type);
+  }
+
+  private idleStateChanged() {
+    if (this.isIdle) {
+      this.notificationsService.disconnectFromInactivity();
+    } else {
+      this.notificationsService.reconnectFromActivity();
+    }
+  }
+
+  private async setFullWidth() {
+    const enableFullWidth = await this.stateService.getEnableFullWidth();
+    if (enableFullWidth) {
+      document.body.classList.add("full-width");
+    } else {
+      document.body.classList.remove("full-width");
+    }
+  }
+}

apps/web/src/app/app.module.ts

@@ -0,0 +1,27 @@
+import { DragDropModule } from "@angular/cdk/drag-drop";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+
+import { AppComponent } from "./app.component";
+import { OssRoutingModule } from "./oss-routing.module";
+import { OssModule } from "./oss.module";
+import { ServicesModule } from "./services/services.module";
+import { WildcardRoutingModule } from "./wildcard-routing.module";
+
+@NgModule({
+  imports: [
+    OssModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    ServicesModule,
+    InfiniteScrollModule,
+    DragDropModule,
+    OssRoutingModule,
+    WildcardRoutingModule, // Needs to be last to catch all non-existing routes
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

apps/web/src/app/common/base.accept.component.ts

@@ -0,0 +1,63 @@
+import { Directive, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { first } from "rxjs/operators";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+
+@Directive()
+export abstract class BaseAcceptComponent implements OnInit {
+  loading = true;
+  authed = false;
+  email: string;
+  actionPromise: Promise<any>;
+
+  protected requiredParameters: string[] = [];
+  protected failedShortMessage = "inviteAcceptFailedShort";
+  protected failedMessage = "inviteAcceptFailed";
+
+  constructor(
+    protected router: Router,
+    protected platformUtilService: PlatformUtilsService,
+    protected i18nService: I18nService,
+    protected route: ActivatedRoute,
+    protected stateService: StateService
+  ) {}
+
+  abstract authedHandler(qParams: any): Promise<void>;
+  abstract unauthedHandler(qParams: any): Promise<void>;
+
+  ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      let error = this.requiredParameters.some((e) => qParams?.[e] == null || qParams[e] === "");
+      let errorMessage: string = null;
+      if (!error) {
+        this.authed = await this.stateService.getIsAuthenticated();
+
+        if (this.authed) {
+          try {
+            await this.authedHandler(qParams);
+          } catch (e) {
+            error = true;
+            errorMessage = e.message;
+          }
+        } else {
+          this.email = qParams.email;
+          await this.unauthedHandler(qParams);
+        }
+      }
+
+      if (error) {
+        const message =
+          errorMessage != null
+            ? this.i18nService.t(this.failedShortMessage, errorMessage)
+            : this.i18nService.t(this.failedMessage);
+        this.platformUtilService.showToast("error", null, message, { timeout: 10000 });
+        this.router.navigate(["/"]);
+      }
+
+      this.loading = false;
+    });
+  }
+}

apps/web/src/app/common/base.events.component.ts

@@ -0,0 +1,178 @@
+import { Directive } from "@angular/core";
+
+import { ExportService } from "jslib-common/abstractions/export.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { EventResponse } from "jslib-common/models/response/eventResponse";
+import { ListResponse } from "jslib-common/models/response/listResponse";
+import { EventView } from "jslib-common/models/view/eventView";
+
+import { EventService } from "src/app/services/event.service";
+
+@Directive()
+export abstract class BaseEventsComponent {
+  loading = true;
+  loaded = false;
+  events: EventView[];
+  start: string;
+  end: string;
+  dirtyDates = true;
+  continuationToken: string;
+  refreshPromise: Promise<any>;
+  exportPromise: Promise<any>;
+  morePromise: Promise<any>;
+
+  abstract readonly exportFileName: string;
+
+  constructor(
+    protected eventService: EventService,
+    protected i18nService: I18nService,
+    protected exportService: ExportService,
+    protected platformUtilsService: PlatformUtilsService,
+    protected logService: LogService
+  ) {
+    const defaultDates = this.eventService.getDefaultDateFilters();
+    this.start = defaultDates[0];
+    this.end = defaultDates[1];
+  }
+
+  async exportEvents() {
+    if (this.appApiPromiseUnfulfilled() || this.dirtyDates) {
+      return;
+    }
+
+    this.loading = true;
+
+    const dates = this.parseDates();
+    if (dates == null) {
+      return;
+    }
+
+    try {
+      this.exportPromise = this.export(dates[0], dates[1]);
+
+      await this.exportPromise;
+    } catch (e) {
+      this.logService.error(`Handled exception: ${e}`);
+    }
+
+    this.exportPromise = null;
+    this.loading = false;
+  }
+
+  async loadEvents(clearExisting: boolean) {
+    if (this.appApiPromiseUnfulfilled()) {
+      return;
+    }
+
+    const dates = this.parseDates();
+    if (dates == null) {
+      return;
+    }
+
+    this.loading = true;
+    let events: EventView[] = [];
+    try {
+      const promise = this.loadAndParseEvents(
+        dates[0],
+        dates[1],
+        clearExisting ? null : this.continuationToken
+      );
+      if (clearExisting) {
+        this.refreshPromise = promise;
+      } else {
+        this.morePromise = promise;
+      }
+      const result = await promise;
+      this.continuationToken = result.continuationToken;
+      events = result.events;
+    } catch (e) {
+      this.logService.error(`Handled exception: ${e}`);
+    }
+
+    if (!clearExisting && this.events != null && this.events.length > 0) {
+      this.events = this.events.concat(events);
+    } else {
+      this.events = events;
+    }
+
+    this.dirtyDates = false;
+    this.loading = false;
+    this.morePromise = null;
+    this.refreshPromise = null;
+  }
+
+  protected abstract requestEvents(
+    startDate: string,
+    endDate: string,
+    continuationToken: string
+  ): Promise<ListResponse<EventResponse>>;
+  protected abstract getUserName(r: EventResponse, userId: string): { name: string; email: string };
+
+  protected async loadAndParseEvents(
+    startDate: string,
+    endDate: string,
+    continuationToken: string
+  ) {
+    const response = await this.requestEvents(startDate, endDate, continuationToken);
+
+    const events = await Promise.all(
+      response.data.map(async (r) => {
+        const userId = r.actingUserId == null ? r.userId : r.actingUserId;
+        const eventInfo = await this.eventService.getEventInfo(r);
+        const user = this.getUserName(r, userId);
+        const userName = user != null ? user.name : this.i18nService.t("unknown");
+
+        return new EventView({
+          message: eventInfo.message,
+          humanReadableMessage: eventInfo.humanReadableMessage,
+          appIcon: eventInfo.appIcon,
+          appName: eventInfo.appName,
+          userId: userId,
+          userName: r.installationId != null ? `Installation: ${r.installationId}` : userName,
+          userEmail: user != null ? user.email : "",
+          date: r.date,
+          ip: r.ipAddress,
+          type: r.type,
+          installationId: r.installationId,
+        });
+      })
+    );
+    return { continuationToken: response.continuationToken, events: events };
+  }
+
+  protected parseDates() {
+    let dates: string[] = null;
+    try {
+      dates = this.eventService.formatDateFilters(this.start, this.end);
+    } catch (e) {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("invalidDateRange")
+      );
+      return null;
+    }
+    return dates;
+  }
+
+  protected appApiPromiseUnfulfilled() {
+    return this.refreshPromise != null || this.morePromise != null || this.exportPromise != null;
+  }
+
+  private async export(start: string, end: string) {
+    let continuationToken = this.continuationToken;
+    let events = [].concat(this.events);
+
+    while (continuationToken != null) {
+      const result = await this.loadAndParseEvents(start, end, continuationToken);
+      continuationToken = result.continuationToken;
+      events = events.concat(result.events);
+    }
+
+    const data = await this.exportService.getEventExport(events);
+    const fileName = this.exportService.getFileName(this.exportFileName, "csv");
+    this.platformUtilsService.saveFile(window, data, { type: "text/plain" }, fileName);
+  }
+}

apps/web/src/app/common/base.people.component.ts

@@ -0,0 +1,345 @@
+import { Directive, ViewChild, ViewContainerRef } from "@angular/core";
+
+import { SearchPipe } from "jslib-angular/pipes/search.pipe";
+import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
+import { ModalService } from "jslib-angular/services/modal.service";
+import { ValidationService } from "jslib-angular/services/validation.service";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { SearchService } from "jslib-common/abstractions/search.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { OrganizationUserStatusType } from "jslib-common/enums/organizationUserStatusType";
+import { OrganizationUserType } from "jslib-common/enums/organizationUserType";
+import { ProviderUserStatusType } from "jslib-common/enums/providerUserStatusType";
+import { ProviderUserType } from "jslib-common/enums/providerUserType";
+import { Utils } from "jslib-common/misc/utils";
+import { ListResponse } from "jslib-common/models/response/listResponse";
+import { OrganizationUserUserDetailsResponse } from "jslib-common/models/response/organizationUserResponse";
+import { ProviderUserUserDetailsResponse } from "jslib-common/models/response/provider/providerUserResponse";
+
+import { UserConfirmComponent } from "../organizations/manage/user-confirm.component";
+
+type StatusType = OrganizationUserStatusType | ProviderUserStatusType;
+
+const MaxCheckedCount = 500;
+
+@Directive()
+export abstract class BasePeopleComponent<
+  UserType extends ProviderUserUserDetailsResponse | OrganizationUserUserDetailsResponse
+> {
+  @ViewChild("confirmTemplate", { read: ViewContainerRef, static: true })
+  confirmModalRef: ViewContainerRef;
+
+  get allCount() {
+    return this.allUsers != null ? this.allUsers.length : 0;
+  }
+
+  get invitedCount() {
+    return this.statusMap.has(this.userStatusType.Invited)
+      ? this.statusMap.get(this.userStatusType.Invited).length
+      : 0;
+  }
+
+  get acceptedCount() {
+    return this.statusMap.has(this.userStatusType.Accepted)
+      ? this.statusMap.get(this.userStatusType.Accepted).length
+      : 0;
+  }
+
+  get confirmedCount() {
+    return this.statusMap.has(this.userStatusType.Confirmed)
+      ? this.statusMap.get(this.userStatusType.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
+    );
+  }
+
+  get showBulkConfirmUsers(): boolean {
+    return this.acceptedCount > 0;
+  }
+
+  abstract userType: typeof OrganizationUserType | typeof ProviderUserType;
+  abstract userStatusType: typeof OrganizationUserStatusType | typeof ProviderUserStatusType;
+
+  loading = true;
+  statusMap = new Map<StatusType, UserType[]>();
+  status: StatusType;
+  users: UserType[] = [];
+  pagedUsers: UserType[] = [];
+  searchText: string;
+  actionPromise: Promise<any>;
+
+  protected allUsers: UserType[] = [];
+
+  protected didScroll = false;
+  protected pageSize = 100;
+
+  private pagedUsersCount = 0;
+
+  constructor(
+    protected apiService: ApiService,
+    private searchService: SearchService,
+    protected i18nService: I18nService,
+    protected platformUtilsService: PlatformUtilsService,
+    protected cryptoService: CryptoService,
+    protected validationService: ValidationService,
+    protected modalService: ModalService,
+    private logService: LogService,
+    private searchPipe: SearchPipe,
+    protected userNamePipe: UserNamePipe,
+    protected stateService: StateService
+  ) {}
+
+  abstract edit(user: UserType): void;
+  abstract getUsers(): Promise<ListResponse<UserType>>;
+  abstract deleteUser(id: string): Promise<any>;
+  abstract reinviteUser(id: string): Promise<any>;
+  abstract confirmUser(user: UserType, publicKey: Uint8Array): Promise<any>;
+
+  async load() {
+    const response = await this.getUsers();
+    this.statusMap.clear();
+    for (const status of Utils.iterateEnum(this.userStatusType)) {
+      this.statusMap.set(status, []);
+    }
+
+    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: StatusType) {
+    this.status = status;
+    if (this.status != null) {
+      this.users = this.statusMap.get(this.status);
+    } else {
+      this.users = this.allUsers;
+    }
+    // Reset checkbox selecton
+    this.selectAll(false);
+    this.resetPaging();
+  }
+
+  loadMore() {
+    if (!this.users || this.users.length <= this.pageSize) {
+      return;
+    }
+    const pagedLength = this.pagedUsers.length;
+    let pagedSize = this.pageSize;
+    if (pagedLength === 0 && this.pagedUsersCount > this.pageSize) {
+      pagedSize = this.pagedUsersCount;
+    }
+    if (this.users.length > pagedLength) {
+      this.pagedUsers = this.pagedUsers.concat(
+        this.users.slice(pagedLength, pagedLength + pagedSize)
+      );
+    }
+    this.pagedUsersCount = this.pagedUsers.length;
+    this.didScroll = this.pagedUsers.length > this.pageSize;
+  }
+
+  checkUser(user: OrganizationUserUserDetailsResponse, select?: boolean) {
+    (user as any).checked = select == null ? !(user as any).checked : select;
+  }
+
+  selectAll(select: boolean) {
+    if (select) {
+      this.selectAll(false);
+    }
+
+    const filteredUsers = this.searchPipe.transform(
+      this.users,
+      this.searchText,
+      "name",
+      "email",
+      "id"
+    );
+
+    const selectCount =
+      select && filteredUsers.length > MaxCheckedCount ? MaxCheckedCount : filteredUsers.length;
+    for (let i = 0; i < selectCount; i++) {
+      this.checkUser(filteredUsers[i], select);
+    }
+  }
+
+  async resetPaging() {
+    this.pagedUsers = [];
+    this.loadMore();
+  }
+
+  invite() {
+    this.edit(null);
+  }
+
+  async remove(user: UserType) {
+    const confirmed = await this.platformUtilsService.showDialog(
+      this.deleteWarningMessage(user),
+      this.userNamePipe.transform(user),
+      this.i18nService.t("yes"),
+      this.i18nService.t("no"),
+      "warning"
+    );
+
+    if (!confirmed) {
+      return false;
+    }
+
+    this.actionPromise = this.deleteUser(user.id);
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("removedUserId", this.userNamePipe.transform(user))
+      );
+      this.removeUser(user);
+    } catch (e) {
+      this.validationService.showError(e);
+    }
+    this.actionPromise = null;
+  }
+
+  async reinvite(user: UserType) {
+    if (this.actionPromise != null) {
+      return;
+    }
+
+    this.actionPromise = this.reinviteUser(user.id);
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("hasBeenReinvited", this.userNamePipe.transform(user))
+      );
+    } catch (e) {
+      this.validationService.showError(e);
+    }
+    this.actionPromise = null;
+  }
+
+  async confirm(user: UserType) {
+    function updateUser(self: BasePeopleComponent<UserType>) {
+      user.status = self.userStatusType.Confirmed;
+      const mapIndex = self.statusMap.get(self.userStatusType.Accepted).indexOf(user);
+      if (mapIndex > -1) {
+        self.statusMap.get(self.userStatusType.Accepted).splice(mapIndex, 1);
+        self.statusMap.get(self.userStatusType.Confirmed).push(user);
+      }
+    }
+
+    const confirmUser = async (publicKey: Uint8Array) => {
+      try {
+        this.actionPromise = this.confirmUser(user, publicKey);
+        await this.actionPromise;
+        updateUser(this);
+        this.platformUtilsService.showToast(
+          "success",
+          null,
+          this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(user))
+        );
+      } catch (e) {
+        this.validationService.showError(e);
+        throw e;
+      } finally {
+        this.actionPromise = null;
+      }
+    };
+
+    if (this.actionPromise != null) {
+      return;
+    }
+
+    try {
+      const publicKeyResponse = await this.apiService.getUserPublicKey(user.userId);
+      const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+
+      const autoConfirm = await this.stateService.getAutoConfirmFingerPrints();
+      if (autoConfirm == null || !autoConfirm) {
+        const [modal] = await this.modalService.openViewRef(
+          UserConfirmComponent,
+          this.confirmModalRef,
+          (comp) => {
+            comp.name = this.userNamePipe.transform(user);
+            comp.userId = user != null ? user.userId : null;
+            comp.publicKey = publicKey;
+            comp.onConfirmedUser.subscribe(async () => {
+              try {
+                comp.formPromise = confirmUser(publicKey);
+                await comp.formPromise;
+                modal.close();
+              } catch (e) {
+                this.logService.error(e);
+              }
+            });
+          }
+        );
+        return;
+      }
+
+      try {
+        const fingerprint = await this.cryptoService.getFingerprint(user.userId, publicKey.buffer);
+        this.logService.info(`User's fingerprint: ${fingerprint.join("-")}`);
+      } catch (e) {
+        this.logService.error(e);
+      }
+      await confirmUser(publicKey);
+    } catch (e) {
+      this.logService.error(`Handled exception: ${e}`);
+    }
+  }
+
+  isSearching() {
+    return this.searchService.isSearchable(this.searchText);
+  }
+
+  isPaging() {
+    const searching = this.isSearching();
+    if (searching && this.didScroll) {
+      this.resetPaging();
+    }
+    return !searching && this.users && this.users.length > this.pageSize;
+  }
+
+  protected deleteWarningMessage(user: UserType): string {
+    return this.i18nService.t("removeUserConfirmation");
+  }
+
+  protected getCheckedUsers() {
+    return this.users.filter((u) => (u as any).checked);
+  }
+
+  protected removeUser(user: UserType) {
+    let index = this.users.indexOf(user);
+    if (index > -1) {
+      this.users.splice(index, 1);
+      this.resetPaging();
+    }
+    if (this.statusMap.has(user.status)) {
+      index = this.statusMap.get(user.status).indexOf(user);
+      if (index > -1) {
+        this.statusMap.get(user.status).splice(index, 1);
+      }
+    }
+  }
+}

apps/web/src/app/components/nested-checkbox.component.html

@@ -0,0 +1,30 @@
+<div class="form-group mb-0">
+  <div class="form-check mt-1 form-check-block">
+    <input
+      class="form-check-input"
+      type="checkbox"
+      [name]="pascalize(parentId)"
+      [id]="parentId"
+      [(ngModel)]="parentChecked"
+      [indeterminate]="parentIndeterminate"
+    />
+    <label class="form-check-label font-weight-normal" [for]="parentId">
+      {{ parentId | i18n }}
+    </label>
+  </div>
+  <div class="form-group form-group-child-check mb-0">
+    <div class="form-check mt-1" *ngFor="let c of checkboxes">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        [name]="pascalize(c.id)"
+        [id]="c.id"
+        [ngModel]="c.get()"
+        (ngModelChange)="c.set($event)"
+      />
+      <label class="form-check-label font-weight-normal" [for]="c.id">
+        {{ c.id | i18n }}
+      </label>
+    </div>
+  </div>
+</div>

apps/web/src/app/components/nested-checkbox.component.ts

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+
+import { Utils } from "jslib-common/misc/utils";
+
+@Component({
+  selector: "app-nested-checkbox",
+  templateUrl: "nested-checkbox.component.html",
+})
+export class NestedCheckboxComponent {
+  @Input() parentId: string;
+  @Input() checkboxes: { id: string; get: () => boolean; set: (v: boolean) => void }[];
+  @Output() onSavedUser = new EventEmitter();
+  @Output() onDeletedUser = new EventEmitter();
+
+  get parentIndeterminate() {
+    return !this.parentChecked && this.checkboxes.some((c) => c.get());
+  }
+
+  get parentChecked() {
+    return this.checkboxes.every((c) => c.get());
+  }
+
+  set parentChecked(value: boolean) {
+    this.checkboxes.forEach((c) => {
+      c.set(value);
+    });
+  }
+
+  pascalize(s: string) {
+    return Utils.camelToPascalCase(s);
+  }
+}

apps/web/src/app/components/organization-switcher.component.html

@@ -0,0 +1,68 @@
+<div *ngIf="loaded && activeOrganization != null" class="tw-flex">
+  <button
+    class="tw-flex tw-items-center tw-bg-background-alt tw-border-none"
+    type="button"
+    id="pickerButton"
+    [appA11yTitle]="'organizationPicker' | i18n"
+    [bitMenuTriggerFor]="orgPickerMenu"
+  >
+    <app-avatar
+      [data]="activeOrganization.name"
+      size="45"
+      [circle]="true"
+      [dynamic]="true"
+    ></app-avatar>
+    <div class="tw-flex">
+      <div class="org-name tw-ml-3">
+        <span>{{ activeOrganization.name }}</span>
+        <small class="tw-text-muted">{{ "organization" | i18n }}</small>
+      </div>
+      <div class="tw-ml-3">
+        <i class="bwi bwi-angle-down tw-text-main" aria-hidden="true"></i>
+      </div>
+    </div>
+  </button>
+  <div>
+    <div
+      class="tw-ml-3 tw-border tw-border-solid tw-rounded tw-border-danger-500 tw-text-danger"
+      *ngIf="!activeOrganization.enabled"
+    >
+      <div class="tw-py-2 tw-px-5">
+        <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
+        {{ "organizationIsDisabled" | i18n }}
+      </div>
+    </div>
+    <div
+      class="tw-ml-3 tw-border tw-border-solid tw-rounded tw-border-info-500 tw-text-info"
+      *ngIf="activeOrganization.isProviderUser"
+    >
+      <div class="tw-py-2 tw-px-5">
+        <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
+        {{ "accessingUsingProvider" | i18n: activeOrganization.providerName }}
+      </div>
+    </div>
+  </div>
+
+  <bit-menu #orgPickerMenu>
+    <ul aria-labelledby="pickerButton" class="tw-p-0 tw-m-0">
+      <li *ngFor="let org of organizations" class="tw-list-none tw-flex tw-flex-col" role="none">
+        <a bitMenuItem [routerLink]="['/organizations', org.id]">
+          <i
+            class="bwi bwi-check mr-2"
+            [ngClass]="org.id === activeOrganization.id ? 'visible' : 'invisible'"
+          >
+            <span class="tw-sr-only">{{ "currentOrganization" | i18n }}</span>
+          </i>
+          {{ org.name }}
+        </a>
+      </li>
+      <bit-menu-divider></bit-menu-divider>
+      <li class="tw-list-none" role="none">
+        <a bitMenuItem routerLink="/create-organization">
+          <i class="bwi bwi-plus mr-2"></i>
+          {{ "newOrganization" | i18n }}</a
+        >
+      </li>
+    </ul>
+  </bit-menu>
+</div>

apps/web/src/app/components/organization-switcher.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { Utils } from "jslib-common/misc/utils";
+import { Organization } from "jslib-common/models/domain/organization";
+
+import { NavigationPermissionsService } from "../organizations/services/navigation-permissions.service";
+
+@Component({
+  selector: "app-organization-switcher",
+  templateUrl: "organization-switcher.component.html",
+})
+export class OrganizationSwitcherComponent implements OnInit {
+  constructor(private organizationService: OrganizationService, private i18nService: I18nService) {}
+
+  @Input() activeOrganization: Organization = null;
+  organizations: Organization[] = [];
+
+  loaded = false;
+
+  async ngOnInit() {
+    await this.load();
+  }
+
+  async load() {
+    const orgs = await this.organizationService.getAll();
+    this.organizations = orgs
+      .filter((org) => NavigationPermissionsService.canAccessAdmin(org))
+      .sort(Utils.getSortFunction(this.i18nService, "name"));
+
+    this.loaded = true;
+  }
+}

apps/web/src/app/components/password-reprompt.component.html

@@ -0,0 +1,53 @@
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+  <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <form class="modal-content" #form (ngSubmit)="submit()">
+      <div class="modal-header">
+        <h2 class="modal-title" id="confirmUserTitle">
+          {{ "passwordConfirmation" | i18n }}
+        </h2>
+        <button type="button" class="close" data-dismiss="modal">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        {{ "passwordConfirmationDesc" | i18n }}
+
+        <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="bwi bwi-lg"
+                aria-hidden="true"
+                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+              ></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
+          <span>{{ "ok" | i18n }}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "cancel" | i18n }}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

apps/web/src/app/components/password-reprompt.component.ts

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+import { PasswordRepromptComponent as BasePasswordRepromptComponent } from "jslib-angular/components/password-reprompt.component";
+
+@Component({
+  templateUrl: "password-reprompt.component.html",
+})
+export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}

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

@@ -0,0 +1,14 @@
+<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>

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

@@ -0,0 +1,40 @@
+import { Component, Input, OnChanges } from "@angular/core";
+
+import { I18nService } from "jslib-common/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;
+    }
+  }
+}

apps/web/src/app/components/premium-badge.component.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+
+@Component({
+  selector: "app-premium-badge",
+  template: `
+    <button *appNotPremium bitBadge badgeType="success" (click)="premiumRequired()">
+      {{ "premium" | i18n }}
+    </button>
+  `,
+})
+export class PremiumBadgeComponent {
+  constructor(private messagingService: MessagingService) {}
+
+  premiumRequired() {
+    this.messagingService.send("premiumRequired");
+  }
+}

apps/web/src/app/guards/home.guard.ts

@@ -0,0 +1,22 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, Router } from "@angular/router";
+
+import { AuthService } from "jslib-common/abstractions/auth.service";
+import { AuthenticationStatus } from "jslib-common/enums/authenticationStatus";
+
+@Injectable()
+export class HomeGuard implements CanActivate {
+  constructor(private router: Router, private authService: AuthService) {}
+
+  async canActivate(route: ActivatedRouteSnapshot) {
+    const authStatus = await this.authService.getAuthStatus();
+
+    if (authStatus === AuthenticationStatus.LoggedOut) {
+      return this.router.createUrlTree(["/login"], { queryParams: route.queryParams });
+    }
+    if (authStatus === AuthenticationStatus.Locked) {
+      return this.router.createUrlTree(["/lock"], { queryParams: route.queryParams });
+    }
+    return this.router.createUrlTree(["/vault"], { queryParams: route.queryParams });
+  }
+}