bump version

* New translations messages.json (Afrikaans)

* New translations messages.json (Hebrew)

* New translations messages.json (Ukrainian)

* New translations messages.json (Turkish)

* New translations messages.json (Swedish)

* New translations messages.json (Spanish)

* New translations messages.json (Slovak)

* New translations messages.json (Russian)

* New translations messages.json (Portuguese, Brazilian)

* New translations messages.json (Portuguese)

* New translations messages.json (Polish)

* New translations messages.json (Norwegian Bokmal)

* New translations messages.json (Korean)

* New translations messages.json (Japanese)

* New translations messages.json (Italian)

* New translations messages.json (Hungarian)

* New translations messages.json (Greek)

* New translations messages.json (Belarusian)

* New translations messages.json (German)

* New translations messages.json (French)

* New translations messages.json (Finnish)

* New translations messages.json (Estonian)

* New translations messages.json (Esperanto)

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

* New translations messages.json (Dutch)

* New translations messages.json (Danish)

* New translations messages.json (Czech)

* New translations messages.json (Croatian)

* New translations messages.json (Chinese Traditional)

* New translations messages.json (Chinese Simplified)

* New translations messages.json (Catalan)

* New translations messages.json (Bulgarian)

* New translations messages.json (Vietnamese)

.dockerignore

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

.editorconfig

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

.gitattributes

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

.gitignore

@@ -1,203 +1,13 @@
-## Ignore Visual Studio temporary files, build results, and
-## files generated by popular Visual Studio add-ons.
-
-# User-specific files
-*.suo
-*.user
-*.userosscache
-*.sln.docstates
-
-# User-specific files (MonoDevelop/Xamarin Studio)
-*.userprefs
-
-# Build results
-[Dd]ebug/
-[Dd]ebugPublic/
-[Rr]elease/
-[Rr]eleases/
-x64/
-x86/
-build/
-bld/
-[Bb]in/
-[Oo]bj/
-
-# Visual Studo 2015 cache/options directory
-.vs/
-
-# MSTest test Results
-[Tt]est[Rr]esult*/
-[Bb]uild[Ll]og.*
-
-# NUNIT
-*.VisualState.xml
-TestResult.xml
-
-# Build Results of an ATL Project
-[Dd]ebugPS/
-[Rr]eleasePS/
-dlldata.c
-
-*_i.c
-*_p.c
-*_i.h
-*.ilk
-*.meta
-*.obj
-*.pch
-*.pdb
-*.pgc
-*.pgd
-*.rsp
-*.sbr
-*.tlb
-*.tli
-*.tlh
-*.tmp
-*.tmp_proj
-*.log
-*.vspscc
-*.vssscc
-.builds
-*.pidb
-*.svclog
-*.scc
-
-# Chutzpah Test files
-_Chutzpah*
-
-# Visual C++ cache files
-ipch/
-*.aps
-*.ncb
-*.opensdf
-*.sdf
-*.cachefile
-
-# Visual Studio profiler
-*.psess
-*.vsp
-*.vspx
-
-# TFS 2012 Local Workspace
-$tf/
-
-# Guidance Automation Toolkit
-*.gpState
-
-# ReSharper is a .NET coding add-in
-_ReSharper*/
-*.[Rr]e[Ss]harper
-*.DotSettings.user
-
-# JustCode is a .NET coding addin-in
-.JustCode
-
-# TeamCity is a build add-in
-_TeamCity*
-
-# DotCover is a Code Coverage Tool
-*.dotCover
-
-# NCrunch
-_NCrunch_*
-.*crunch*.local.xml
-
-# MightyMoose
-*.mm.*
-AutoTest.Net/
-
-# Web workbench (sass)
-.sass-cache/
-
-# Installshield output folder
-[Ee]xpress/
-
-# DocProject is a documentation generator add-in
-DocProject/buildhelp/
-DocProject/Help/*.HxT
-DocProject/Help/*.HxC
-DocProject/Help/*.hhc
-DocProject/Help/*.hhk
-DocProject/Help/*.hhp
-DocProject/Help/Html2
-DocProject/Help/html
-
-# Click-Once directory
-publish/
-
-# Publish Web Output
-*.[Pp]ublish.xml
-*.azurePubxml
-# TODO: Comment the next line if you want to checkin your web deploy settings 
-# but database connection strings (with potential passwords) will be unencrypted
-*.pubxml
-*.publishproj
-
-# NuGet Packages
-*.nupkg
-# The packages folder can be ignored because of Package Restore
-**/packages/*
-# except build/, which is used as an MSBuild target.
-!**/packages/build/
-# Uncomment if necessary however generally it will be regenerated when needed
-#!**/packages/repositories.config
-
-# Windows Azure Build Output
-csx/
-*.build.csdef
-
-# Windows Store app package directory
-AppPackages/
-
-# Others
-*.[Cc]ache
-ClientBin/
-[Ss]tyle[Cc]op.*
-~$*
-*~
-*.dbmdl
-*.dbproj.schemaview
-*.pfx
-*.publishsettings
-node_modules/
-bower_components/
-lib/
+.vs
+.idea
+.DS_Store
+node_modules
+npm-debug.log
+vwd.webinfo
 css/
 dist/
-
-# RIA/Silverlight projects
-Generated_Code/
-
-# Backup & report files from converting an old project file
-# to a newer Visual Studio version. Backup files are not needed,
-# because we have git ;-)
-_UpgradeReport_Files/
-Backup*/
-UpgradeLog*.XML
-UpgradeLog*.htm
-
-# SQL Server files
-*.mdf
-*.ldf
-
-# Business Intelligence projects
-*.rdl.data
-*.bim.layout
-*.bim_*.settings
-
-# Microsoft Fakes
-FakesAssemblies/
-
-# Node.js Tools for Visual Studio
-.ntvs_analysis.dat
-
-# Visual Studio 6 build log
-*.plg
-
-# Visual Studio 6 workspace options file
-*.opt
-
-# Other
-package-lock.json
-src/js/*.min.js
+*.pem
+*.crx
+*.zip
+build/
+!dev-server.shared.pem

.gitmodules

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

CNAME

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

CONTRIBUTING.md

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

Dockerfile

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

ISSUE_TEMPLATE.md

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

README.md

@@ -1,31 +1,59 @@
-[![appveyor build](https://ci.appveyor.com/api/projects/status/github/bitwarden/web?branch=master&svg=true)](https://ci.appveyor.com/project/bitwarden/web) [![Join the chat at https://gitter.im/bitwarden/Lobby](https://badges.gitter.im/bitwarden/Lobby.svg)](https://gitter.im/bitwarden/Lobby)
+<p align="center">
+    <img src="https://raw.githubusercontent.com/bitwarden/brand/master/screenshots/web-vault-macbook.png" alt="" width="600" height="358" />
+</p>
+<p align="center">
+    The Bitwarden web project is an Angular application that powers the web vault (https://vault.bitwarden.com/).
+</p>
+<p align="center">
+  <a href="https://ci.appveyor.com/project/bitwarden/web/branch/master" target="_blank">
+    <img src="https://ci.appveyor.com/api/projects/status/github/bitwarden/web?branch=master&svg=true" alt="appveyor build" />
+  </a>
+  <a href="https://crowdin.com/project/bitwarden-web" target="_blank">
+    <img src="https://d322cqt584bo4o.cloudfront.net/bitwarden-web/localized.svg" alt="Crowdin" />
+  </a>
+  <a href="https://hub.docker.com/u/bitwarden/" target="_blank">
+    <img src="https://img.shields.io/docker/pulls/bitwarden/web.svg" alt="DockerHub" />
+  </a>
+  <a href="https://gitter.im/bitwarden/Lobby" target="_blank">
+    <img src="https://badges.gitter.im/bitwarden/Lobby.svg" alt="gitter chat" />
+  </a>
+</p>
 
-# bitwarden Web
+## Build/Run
 
-The bitwarden Web project is an AngularJS application that powers the web vault (https://vault.bitwarden.com/).
+### Requirements
 
-<img src="https://i.imgur.com/rxrykeX.png" alt="" width="791" height="739" />
+- [Node.js](https://nodejs.org) v8.11 or greater
 
-# Build/Run
+### Run the app
 
-**Requirements**
+```
+npm install
+npm run build:watch
+```
 
-- Node.js
-- Gulp
+You can now access the web vault in your browser at `https://localhost:8080`. You can adjust your API endpoint settings in `src/app/services/services.module.ts` by altering the `apiService.setUrls` call. For example:
 
-By default the application points to the production API. If you want to change that to point to a local instance of
-the [Core](https://github.com/bitwarden/core) API, you can modify the `package.json` `env` property to `Development`
-and then set your local endpoints in `settings.json`.
+```typescript
+await apiService.setUrls({
+    base: isDev ? null : window.location.origin,
+    api: isDev ? 'http://mylocalapi' : null,
+    identity: isDev ? 'http://mylocalidentity' : null,
+});
+```
 
-Then run the following commands:
+If you want to point the development web vault to the production APIs, you can set:
 
-- `npm install`
-- `gulp build`
-- `gulp serve`
+```typescript
+await apiService.setUrls({
+    base: null,
+    api: 'https://api.bitwarden.com',
+    identity: 'https://identity.bitwarden.com',
+});
+```
 
-You can now access the web vault at `http://localhost:4001`.
 
-# Contribute
+## Contribute
 
 Code contributions are welcome! Please commit any pull requests against the `master` branch.
 

SECURITY.md

@@ -1,4 +1,4 @@
-bitwarden believes that working with security researchers across the globe is crucial to keeping our
+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!
 
@@ -16,7 +16,7 @@ notify us. We welcome working with you to resolve the issue promptly. Thanks in
 
 # In-scope
 
-- Security issues in any current release of bitwarden. This includes the web vault, browser extension,
+- 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.
 
@@ -24,14 +24,14 @@ notify us. We welcome working with you to resolve the issue promptly. Thanks in
 
 The following bug classes are out-of scope:
 
-- Bugs that are already reported on any of bitwarden's issue trackers (https://github.com/bitwarden),
+- 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
+- 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
 
@@ -39,7 +39,7 @@ 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
+- 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!
+Thank you for helping keep Bitwarden and our users safe!

appveyor.yml

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

bitwarden-web.sln

@@ -1,39 +0,0 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio 15
-VisualStudioVersion = 15.0.26228.9
-MinimumVisualStudioVersion = 10.0.40219.1
-Project("{E24C65DC-7377-472B-9ABA-BC803B73C61A}") = "bitwarden-web", ".", "{25BEDEF4-2CAF-445A-807D-63C17FF85694}"
-	ProjectSection(WebsiteProperties) = preProject
-		TargetFrameworkMoniker = ".NETFramework,Version%3Dv4.6.1"
-		Debug.AspNetCompiler.VirtualPath = "/localhost_15509"
-		Debug.AspNetCompiler.PhysicalPath = "."
-		Debug.AspNetCompiler.TargetPath = "PrecompiledWeb\localhost_15509\"
-		Debug.AspNetCompiler.Updateable = "true"
-		Debug.AspNetCompiler.ForceOverwrite = "true"
-		Debug.AspNetCompiler.FixedNames = "false"
-		Debug.AspNetCompiler.Debug = "True"
-		Release.AspNetCompiler.VirtualPath = "/localhost_15509"
-		Release.AspNetCompiler.PhysicalPath = "."
-		Release.AspNetCompiler.TargetPath = "PrecompiledWeb\localhost_15509\"
-		Release.AspNetCompiler.Updateable = "true"
-		Release.AspNetCompiler.ForceOverwrite = "true"
-		Release.AspNetCompiler.FixedNames = "false"
-		Release.AspNetCompiler.Debug = "False"
-		VWDPort = "15509"
-		SlnRelativePath = "."
-		DefaultWebSiteLanguage = "Visual C#"
-	EndProjectSection
-EndProject
-Global
-	GlobalSection(SolutionConfigurationPlatforms) = preSolution
-		Debug|Any CPU = Debug|Any CPU
-	EndGlobalSection
-	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{25BEDEF4-2CAF-445A-807D-63C17FF85694}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{25BEDEF4-2CAF-445A-807D-63C17FF85694}.Debug|Any CPU.Build.0 = Debug|Any CPU
-	EndGlobalSection
-	GlobalSection(SolutionProperties) = preSolution
-		HideSolutionNode = FALSE
-	EndGlobalSection
-EndGlobal

build.ps1

@@ -1,13 +0,0 @@
-$dir = Split-Path -Parent $MyInvocation.MyCommand.Path
-
-echo "`n# Building Web"
-
-echo "`nBuilding app"
-echo "npm version $(npm --version)"
-echo "gulp version $(gulp --version)"
-npm install
-gulp dist:selfHosted
-
-echo "`nBuilding docker image"
-docker --version
-docker build -t bitwarden/web $dir\.

build.sh

@@ -22,9 +22,9 @@ else
     echo ""
     echo "Building app"
     echo "npm version $(npm --version)"
-    echo "gulp version $(gulp --version)"
     npm install
-    gulp dist:selfHosted
+    npm run sub:update
+    npm run dist:selfhost
 
     echo ""
     echo "Building docker image"

crowdin.yml

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

dev-server.shared.pem

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

entrypoint.sh

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

gulpfile.js

@@ -1,486 +1,37 @@
-/// <binding BeforeBuild='build, dist' Clean='clean' ProjectOpened='build. dist' />
+const gulp = require('gulp');
+const googleWebFonts = require('gulp-google-webfonts');
+const del = require('del');
+const package = require('./package.json');
+const fs = require('fs');
 
-var gulp = require('gulp'),
-    rimraf = require('rimraf'),
-    concat = require('gulp-concat'),
-    rename = require('gulp-rename'),
-    cssmin = require('gulp-cssmin'),
-    uglify = require('gulp-uglify'),
-    ghPages = require('gulp-gh-pages'),
-    less = require('gulp-less'),
-    connect = require('gulp-connect'),
-    ngAnnotate = require('gulp-ng-annotate'),
-    preprocess = require('gulp-preprocess'),
-    runSequence = require('run-sequence'),
-    merge = require('merge-stream'),
-    ngConfig = require('gulp-ng-config'),
-    settings = require('./settings.json'),
-    project = require('./package.json'),
-    jshint = require('gulp-jshint'),
-    _ = require('lodash'),
-    webpack = require('webpack-stream'),
-    browserify = require('browserify'),
-    derequire = require('gulp-derequire'),
-    source = require('vinyl-source-stream');
+const paths = {
+    node_modules: './node_modules/',
+    src: './src/',
+    build: './build/',
+    cssDir: './src/css/',
+};
 
-var paths = {};
-paths.dist = './dist/';
-paths.webroot = './src/';
-paths.js = paths.webroot + 'js/**/*.js';
-paths.minJs = paths.webroot + 'js/**/*.min.js';
-paths.concatJsDest = paths.webroot + 'js/bw.min.js';
-paths.libDir = paths.webroot + 'lib/';
-paths.npmDir = 'node_modules/';
-paths.lessDir = paths.webroot + 'less/';
-paths.cssDir = paths.webroot + 'css/';
-paths.jsDir = paths.webroot + 'js/';
-
-var randomString = Math.random().toString(36).substring(7);
-
-gulp.task('lint', function () {
-    return gulp.src(paths.webroot + 'app/**/*.js')
-        .pipe(jshint())
-        .pipe(jshint.reporter('default'));
-});
-
-gulp.task('build', function (cb) {
-    return runSequence(
-        'clean',
-        ['browserify', 'lib', 'webpack', 'less', 'settings', 'lint', 'min:js'],
-        cb);
-});
-
-gulp.task('clean:js', function (cb) {
-    return rimraf(paths.concatJsDest, cb);
-});
-
-gulp.task('clean:css', function (cb) {
-    return rimraf(paths.cssDir, cb);
-});
-
-gulp.task('clean:lib', function (cb) {
-    return rimraf(paths.libDir, cb);
-});
-
-gulp.task('clean', ['clean:js', 'clean:css', 'clean:lib', 'dist:clean']);
-
-gulp.task('min:js', ['clean:js'], function () {
-    return gulp.src(
-        [
-            paths.js,
-            '!' + paths.minJs,
-            '!' + paths.jsDir + 'fallback*.js',
-            '!' + paths.jsDir + 'u2f-connector.js',
-            '!' + paths.jsDir + 'duo.js',
-            '!' + paths.jsDir + 'settings.js'
-        ], { base: '.' })
-        .pipe(preprocess({ context: { cacheTag: randomString, selfHosted: selfHosted } }))
-        .pipe(concat(paths.concatJsDest))
-        .pipe(uglify())
-        .pipe(gulp.dest('.'));
-});
-
-gulp.task('min:css', [], function () {
-    return gulp.src([paths.cssDir + '**/*.css', '!' + paths.cssDir + '**/*.min.css'], { base: '.' })
-        .pipe(cssmin())
-        .pipe(rename({ suffix: '.min' }))
-        .pipe(gulp.dest('.'));
-});
-
-gulp.task('min', ['min:js', 'min:css']);
-
-gulp.task('lib', ['clean:lib'], function () {
-    var libs = [
-        {
-            src: [
-                paths.npmDir + 'bootstrap/dist/**/*',
-                '!' + paths.npmDir + 'bootstrap/dist/**/npm.js',
-                '!' + paths.npmDir + 'bootstrap/dist/**/css/*theme*'
-            ],
-            dest: paths.libDir + 'bootstrap'
-        },
-        {
-            src: paths.npmDir + 'font-awesome/css/*',
-            dest: paths.libDir + 'font-awesome/css'
-        },
-        {
-            src: paths.npmDir + 'font-awesome/fonts/*',
-            dest: paths.libDir + 'font-awesome/fonts'
-        },
-        {
-            src: paths.npmDir + 'jquery/dist/*.js',
-            dest: paths.libDir + 'jquery'
-        },
-        {
-            src: paths.npmDir + 'admin-lte/dist/js/app*.js',
-            dest: paths.libDir + 'admin-lte/js'
-        },
-        {
-            src: paths.npmDir + 'angular/angular*.js',
-            dest: paths.libDir + 'angular'
-        },
-        {
-            src: paths.npmDir + 'angular-ui-bootstrap/dist/*tpls*.js',
-            dest: paths.libDir + 'angular-ui-bootstrap'
-        },
-        {
-            src: paths.npmDir + 'angular-bootstrap-show-errors/src/*.js',
-            dest: paths.libDir + 'angular-bootstrap-show-errors'
-        },
-        {
-            src: paths.npmDir + 'angular-cookies/*cookies*.js',
-            dest: paths.libDir + 'angular-cookies'
-        },
-        {
-            src: paths.npmDir + 'angular-jwt/dist/*.js',
-            dest: paths.libDir + 'angular-jwt'
-        },
-        {
-            src: paths.npmDir + 'angular-resource/*resource*.js',
-            dest: paths.libDir + 'angular-resource'
-        },
-        {
-            src: paths.npmDir + 'angular-sanitize/*sanitize*.js',
-            dest: paths.libDir + 'angular-sanitize'
-        },
-        {
-            src: [paths.npmDir + 'angular-toastr/dist/**/*.css', paths.npmDir + 'angular-toastr/dist/**/*.js'],
-            dest: paths.libDir + 'angular-toastr'
-        },
-        {
-            src: paths.npmDir + 'angular-ui-router/release/*.js',
-            dest: paths.libDir + 'angular-ui-router'
-        },
-        {
-            src: paths.npmDir + 'angular-messages/*messages*.js',
-            dest: paths.libDir + 'angular-messages'
-        },
-        {
-            src: paths.npmDir + 'ngstorage/*.js',
-            dest: paths.libDir + 'ngstorage'
-        },
-        {
-            src: paths.npmDir + 'papaparse/papaparse*.js',
-            dest: paths.libDir + 'papaparse'
-        },
-        {
-            src: paths.npmDir + 'ngclipboard/dist/ngclipboard*.js',
-            dest: paths.libDir + 'ngclipboard'
-        },
-        {
-            src: paths.npmDir + 'clipboard/dist/clipboard*.js',
-            dest: paths.libDir + 'clipboard'
-        },
-        {
-            src: paths.npmDir + 'node-forge/dist/prime.worker.*',
-            dest: paths.libDir + 'forge'
-        },
-        {
-            src: [
-                paths.npmDir + 'angulartics-google-analytics/lib/angulartics*.js',
-                paths.npmDir + 'angulartics/src/angulartics.js'
-            ],
-            dest: paths.libDir + 'angulartics'
-        },
-        //{
-        //    src: paths.npmDir + 'duo_web_sdk/index.js',
-        //    dest: paths.libDir + 'duo'
-        //},
-        {
-            src: paths.jsDir + 'duo.js',
-            dest: paths.libDir + 'duo'
-        },
-        {
-            src: paths.npmDir + 'angular-promise-polyfill/index.js',
-            dest: paths.libDir + 'angular-promise-polyfill'
-        }
-    ];
-
-    var tasks = libs.map(function (lib) {
-        return gulp.src(lib.src).pipe(gulp.dest(lib.dest));
-    });
-
-    return merge(tasks);
-});
-
-gulp.task('webpack', ['webpack:forge']);
-
-gulp.task('webpack:forge', function () {
-    var forgeDir = paths.npmDir + '/node-forge/lib/';
-
-    return gulp.src([
-        forgeDir + 'pbkdf2.js',
-        forgeDir + 'aes.js',
-        forgeDir + 'rsa.js',
-        forgeDir + 'hmac.js',
-        forgeDir + 'sha256.js',
-        forgeDir + 'random.js',
-        forgeDir + 'forge.js'
-    ]).pipe(webpack({
-        output: {
-            filename: 'forge.js',
-            library: 'forge',
-            libraryTarget: 'umd'
-        },
-        node: {
-            Buffer: false,
-            process: false,
-            crypto: false,
-            setImmediate: false
-        }
-    })).pipe(gulp.dest(paths.libDir + 'forge'));
-});
-
-gulp.task('settings', function () {
-    return config()
-        .pipe(gulp.dest(paths.webroot + 'app'));
-});
-
-function config() {
-    return gulp.src('./settings.json')
-        .pipe(ngConfig('bit', {
-            createModule: false,
-            constants: _.merge({}, {
-                appSettings: {
-                    selfHosted: false,
-                    version: project.version,
-                    environment: project.env
-                }
-            }, require('./settings' + (project.env !== 'Development' ? ('.' + project.env) : '') + '.json') || {})
-        }));
+function clean() {
+    return del([paths.cssDir]);
 }
 
-gulp.task('less', function () {
-    return gulp.src(paths.lessDir + 'vault.less')
-        .pipe(less())
+function webfonts() {
+    return gulp.src('./webfonts.list')
+        .pipe(googleWebFonts({
+            fontsDir: 'webfonts',
+            cssFilename: 'webfonts.css',
+            format: 'woff',
+        }))
         .pipe(gulp.dest(paths.cssDir));
-});
+};
 
-gulp.task('watch', function () {
-    gulp.watch(paths.lessDir + '*.less', ['less']);
-    gulp.watch('./settings*.json', ['settings']);
-});
-
-gulp.task('browserify', ['browserify:stripe', 'browserify:cc']);
-
-gulp.task('browserify:stripe', function () {
-    return browserify(paths.npmDir + 'angular-stripe/src/index.js',
-        {
-            entry: '.',
-            standalone: 'angularStripe',
-            global: true
-        })
-        .transform('exposify', { expose: { angular: 'angular' } })
-        .bundle()
-        .pipe(source('angular-stripe.js'))
-        .pipe(derequire())
-        .pipe(gulp.dest(paths.libDir + 'angular-stripe'));
-});
-
-gulp.task('browserify:cc', function () {
-    return browserify(paths.npmDir + 'angular-credit-cards/src/index.js',
-        {
-            entry: '.',
-            standalone: 'angularCreditCards'
-        })
-        .transform('exposify', { expose: { angular: 'angular' } })
-        .bundle()
-        .pipe(source('angular-credit-cards.js'))
-        .pipe(derequire())
-        .pipe(gulp.dest(paths.libDir + 'angular-credit-cards'));
-});
-
-gulp.task('dist:clean', function (cb) {
-    return rimraf(paths.dist + '**/*', cb);
-});
-
-gulp.task('dist:move', function () {
-    var moves = [
-        {
-            src: './CNAME',
-            dest: paths.dist
-        },
-        {
-            src: [
-                paths.npmDir + 'bootstrap/dist/**/bootstrap.min.js',
-                paths.npmDir + 'bootstrap/dist/**/bootstrap.min.css',
-                paths.npmDir + 'bootstrap/dist/**/fonts/**/*'
-            ],
-            dest: paths.dist + 'lib/bootstrap'
-        },
-        {
-            src: [
-                paths.npmDir + 'font-awesome/**/font-awesome.min.css',
-                paths.npmDir + 'font-awesome/**/fonts/**/*'
-            ],
-            dest: paths.dist + 'lib/font-awesome'
-        },
-        {
-            src: paths.npmDir + 'jquery/dist/jquery.min.js',
-            dest: paths.dist + 'lib/jquery'
-        },
-        {
-            src: paths.npmDir + 'angular/angular.min.js',
-            dest: paths.dist + 'lib/angular'
-        },
-        {
-            src: paths.npmDir + 'node-forge/dist/prime.worker.*',
-            dest: paths.dist + 'lib/forge'
-        },
-        //{
-        //    src: paths.npmDir + 'duo_web_sdk/index.js',
-        //    dest: paths.dist + 'lib/duo'
-        //},
-        {
-            src: paths.jsDir + 'duo.js',
-            dest: paths.dist + 'js'
-        },
-        {
-            src: paths.jsDir + 'settings.js',
-            dest: paths.dist + 'js'
-        },
-        {
-            src: paths.jsDir + 'bw.min.js',
-            dest: paths.dist + 'js'
-        },
-        {
-            src: [
-                paths.webroot + '**/app/**/*.html',
-                paths.webroot + '**/images/**/*',
-                paths.webroot + 'index.html',
-                paths.webroot + 'u2f-connector.html',
-                paths.webroot + 'duo-connector.html',
-                paths.webroot + 'favicon.ico',
-                paths.webroot + 'app-id.json'
-            ],
-            dest: paths.dist
+function version(cb) {
+    fs.writeFileSync(paths.build + 'version.json', '{"version":"' + package.version + '"}');
+    cb();
 }
-    ];
 
-    var tasks = moves.map(function (move) {
-        return gulp.src(move.src).pipe(gulp.dest(move.dest));
-    });
-
-    return merge(tasks);
-});
-
-gulp.task('dist:css', function () {
-    return gulp
-        .src([
-            paths.cssDir + '**/*.css',
-            '!' + paths.cssDir + '**/*.min.css'
-        ])
-        .pipe(preprocess({ context: { cacheTag: randomString, selfHosted: selfHosted } }))
-        .pipe(cssmin())
-        .pipe(rename({ suffix: '.min' }))
-        .pipe(gulp.dest(paths.dist + 'css'));
-});
-
-gulp.task('dist:js:app', function () {
-    var mainStream = gulp
-        .src([
-            paths.webroot + 'app/app.js',
-            '!' + paths.webroot + 'app/settings.js',
-            paths.webroot + 'app/**/*Module.js',
-            paths.webroot + 'app/**/*.js'
-        ]);
-
-    merge(mainStream, config())
-        .pipe(preprocess({ context: { cacheTag: randomString, selfHosted: selfHosted } }))
-        .pipe(concat(paths.dist + '/js/app.min.js'))
-        .pipe(ngAnnotate())
-        .pipe(uglify())
-        .pipe(gulp.dest('.'));
-});
-
-gulp.task('dist:js:fallback', function () {
-    var mainStream = gulp
-        .src([
-            paths.jsDir + 'fallback*.js'
-        ]);
-
-    merge(mainStream)
-        .pipe(preprocess({ context: { cacheTag: randomString, selfHosted: selfHosted } }))
-        .pipe(uglify())
-        .pipe(rename({ suffix: '.min' }))
-        .pipe(gulp.dest(paths.dist + 'js'));
-});
-
-gulp.task('dist:js:u2f', function () {
-    var mainStream = gulp
-        .src([
-            paths.jsDir + 'u2f*.js'
-        ]);
-
-    merge(mainStream)
-        .pipe(concat(paths.dist + '/js/u2f.min.js'))
-        .pipe(uglify())
-        .pipe(gulp.dest('.'));
-});
-
-gulp.task('dist:js:lib', function () {
-    return gulp
-        .src([
-            paths.libDir + 'angulartics/angulartics.js',
-            paths.libDir + '**/*.js',
-            '!' + paths.libDir + '**/*.min.js',
-            '!' + paths.libDir + 'angular/**/*',
-            '!' + paths.libDir + 'bootstrap/**/*',
-            '!' + paths.libDir + 'jquery/**/*'
-        ])
-        .pipe(concat(paths.dist + '/js/lib.min.js'))
-        .pipe(uglify())
-        .pipe(gulp.dest('.'));
-});
-
-gulp.task('dist:preprocess', function () {
-    return gulp
-        .src([
-            paths.dist + '/**/*.html'
-        ], { base: '.' })
-        .pipe(preprocess({ context: { cacheTag: randomString, selfHosted: selfHosted } }))
-        .pipe(gulp.dest('.'));
-});
-
-gulp.task('dist', ['build'], function (cb) {
-    return runSequence(
-        'dist:clean',
-        ['dist:move', 'dist:css', 'dist:js:app', 'dist:js:lib', 'dist:js:fallback', 'dist:js:u2f'],
-        'dist:preprocess',
-        cb);
-});
-
-var selfHosted = false;
-gulp.task('dist:selfHosted', function (cb) {
-    selfHosted = true;
-    return runSequence('dist', cb);
-});
-
-gulp.task('deploy', ['dist'], function () {
-    return gulp.src(paths.dist + '**/*')
-        .pipe(ghPages({ cacheDir: paths.dist + '.publish' }));
-});
-
-gulp.task('deploy-preview', ['dist'], function () {
-    return gulp.src(paths.dist + '**/*')
-        .pipe(ghPages({
-            cacheDir: paths.dist + '.publish',
-            remoteUrl: 'git@github.com:kspearrin/bitwarden-web-preview.git'
-        }));
-});
-
-gulp.task('serve', function () {
-    connect.server({
-        port: 4001,
-        root: ['src'],
-        //https: true,
-        middleware: function (connect, opt) {
-            return [function (req, res, next) {
-                if (req.originalUrl.indexOf('app-id.json') > -1) {
-                    res.setHeader('Content-Type', 'application/fido.trusted-apps+json');
-                }
-                next();
-            }];
-        }
-    });
-});
+exports.clean = clean;
+exports.webfonts = gulp.series(clean, webfonts);
+exports.prebuild = gulp.series(clean, webfonts);
+exports.version = version;
+exports.postdist = version;

package.json

@@ -1,55 +1,99 @@
 {
-  "name": "bitwarden",
-  "version": "1.20.0",
-  "env": "Production",
+  "name": "bitwarden-web",
+  "version": "2.13.1",
+  "scripts": {
+    "sub:init": "git submodule update --init --recursive",
+    "sub:update": "git submodule update --remote",
+    "sub:pull": "git submodule foreach git pull origin master",
+    "postinstall": "npm run sub:init",
+    "symlink:win": "rm -rf ./jslib && cmd /c mklink /J .\\jslib ..\\jslib",
+    "symlink:mac": "npm run symlink:lin",
+    "symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib",
+    "build": "gulp prebuild && webpack",
+    "build:watch": "gulp prebuild && webpack-dev-server",
+    "build:prod": "gulp prebuild && cross-env NODE_ENV=production webpack",
+    "build:prod:watch": "gulp prebuild && cross-env NODE_ENV=production webpack-dev-server",
+    "build:selfhost": "gulp prebuild && cross-env SELF_HOST=true webpack-dev-server",
+    "build:selfhost:watch": "gulp prebuild && cross-env SELF_HOST=true webpack-dev-server",
+    "build:selfhost:prod": "gulp prebuild && cross-env SELF_HOST=true NODE_ENV=production webpack",
+    "build:selfhost:prod:watch": "gulp prebuild && cross-env SELF_HOST=true NODE_ENV=production webpack-dev-server",
+    "clean:l10n": "git push origin --delete l10n_master",
+    "dist": "npm run build:prod && gulp postdist",
+    "dist:selfhost": "npm run build:selfhost:prod && gulp postdist",
+    "deploy": "npm run dist && gh-pages -d build",
+    "deploy:dev": "npm run dist && gh-pages -d build -r git@github.com:kspearrin/bitwarden-web-dev.git",
+    "lint": "tslint src/**/*.ts || true",
+    "lint:fix": "tslint src/**/*.ts --fix"
+  },
   "devDependencies": {
-    "connect": "3.6.3",
-    "lodash": "4.17.4",
-    "gulp": "3.9.1",
-    "gulp-concat": "2.6.1",
-    "gulp-cssmin": "0.2.0",
-    "gulp-less": "3.3.2",
-    "gulp-rename": "1.2.2",
-    "gulp-uglify": "3.0.0",
-    "gulp-gh-pages": "0.5.4",
-    "gulp-preprocess": "2.0.0",
-    "gulp-ng-annotate": "2.0.0",
-    "gulp-ng-config": "1.4.0",
-    "gulp-connect": "5.0.0",
-    "jshint": "2.9.5",
-    "gulp-jshint": "2.0.4",
-    "rimraf": "2.6.1",
-    "run-sequence": "2.1.0",
-    "merge-stream": "1.0.1",
-    "jquery": "2.2.4",
-    "font-awesome": "4.7.0",
-    "bootstrap": "3.3.7",
-    "angular": "1.6.6",
-    "angular-resource": "1.6.6",
-    "angular-sanitize": "1.6.6",
-    "angular-ui-bootstrap": "2.5.0",
-    "angular-ui-router": "0.4.2",
-    "angular-jwt": "0.1.9",
-    "angular-cookies": "1.6.6",
-    "admin-lte": "2.3.11",
-    "angular-toastr": "2.1.1",
-    "angular-bootstrap-show-errors": "2.3.0",
-    "angular-messages": "1.6.6",
-    "ngstorage": "0.3.11",
-    "papaparse": "4.3.5",
-    "clipboard": "1.7.1",
-    "ngclipboard": "1.1.1",
-    "angulartics": "1.4.0",
-    "angulartics-google-analytics": "0.4.0",
-    "node-forge": "0.7.1",
-    "webpack-stream": "4.0.0",
-    "angular-stripe": "5.0.0",
-    "angular-credit-cards": "3.1.6",
-    "browserify": "14.4.0",
-    "vinyl-source-stream": "1.1.0",
-    "gulp-derequire": "2.1.0",
-    "exposify": "0.5.0",
+    "@angular/compiler-cli": "^7.2.11",
+    "@ngtools/webpack": "^7.2.2",
+    "@types/jquery": "^3.3.6",
+    "@types/lunr": "^2.1.6",
+    "@types/node-forge": "^0.7.5",
+    "@types/papaparse": "^4.5.3",
+    "@types/webcrypto": "^0.0.28",
+    "@types/webpack": "^4.4.11",
+    "@types/zxcvbn": "^4.4.0",
+    "angular2-template-loader": "^0.6.2",
+    "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.5.2",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
+    "del": "^3.0.0",
+    "extract-text-webpack-plugin": "next",
+    "file-loader": "^2.0.0",
+    "gh-pages": "^1.2.0",
+    "gulp": "^4.0.0",
+    "gulp-google-webfonts": "^2.0.0",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.13.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.0",
+    "terser-webpack-plugin": "^1.2.3",
+    "ts-loader": "^5.3.3",
+    "tslint": "^5.12.1",
+    "tslint-loader": "^3.5.4",
+    "typescript": "3.2.4",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "dependencies": {
+    "@angular/animations": "7.2.1",
+    "@angular/cdk": "7.2.1",
+    "@angular/common": "7.2.1",
+    "@angular/compiler": "7.2.1",
+    "@angular/core": "7.2.1",
+    "@angular/forms": "7.2.1",
+    "@angular/platform-browser": "7.2.1",
+    "@angular/platform-browser-dynamic": "7.2.1",
+    "@angular/router": "7.2.1",
+    "@angular/upgrade": "7.2.1",
+    "@microsoft/signalr": "3.1.0",
+    "@microsoft/signalr-protocol-msgpack": "3.1.0",
+    "angular2-toaster": "6.1.0",
+    "angulartics2": "6.3.0",
+    "big-integer": "1.6.36",
+    "bootstrap": "4.3.1",
+    "braintree-web-drop-in": "1.13.0",
+    "core-js": "2.6.2",
     "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
-    "angular-promise-polyfill": "0.0.4"
+    "font-awesome": "4.7.0",
+    "jquery": "3.4.1",
+    "lunr": "2.3.3",
+    "ngx-infinite-scroll": "7.0.1",
+    "node-forge": "0.7.6",
+    "papaparse": "4.6.0",
+    "popper.js": "1.14.4",
+    "qrious": "4.0.2",
+    "rxjs": "6.3.3",
+    "sweetalert2": "9.8.1",
+    "web-animations-js": "2.3.1",
+    "webcrypto-shim": "0.1.4",
+    "whatwg-fetch": "3.0.0",
+    "zone.js": "0.8.28",
+    "zxcvbn": "4.4.2"
   }
 }

settings.Preview.json

@@ -1,12 +0,0 @@
-{
-  "appSettings": {
-    "apiUri": "https://preview-api.bitwarden.com",
-    "identityUri": "https://preview-identity.bitwarden.com",
-    "iconsUri": "https://icons.bitwarden.com",
-    "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD",
-    "braintreeKey": "sandbox_r72q8jq6_9pnxkwm75f87sdc2",
-    "whitelistDomains": [
-      "preview-api.bitwarden.com"
-    ]
-  }
-}

settings.Production.json

@@ -1,12 +0,0 @@
-{
-  "appSettings": {
-    "apiUri": "https://api.bitwarden.com",
-    "identityUri": "https://identity.bitwarden.com",
-    "iconsUri": "https://icons.bitwarden.com",
-    "stripeKey": "pk_live_bpN0P37nMxrMQkcaHXtAybJk",
-    "braintreeKey": "production_qfbsv8kc_njj2zjtyngtjmbjd",
-    "whitelistDomains": [
-      "api.bitwarden.com"
-    ]
-  }
-}

settings.json

@@ -1,12 +0,0 @@
-{
-  "appSettings": {
-    "apiUri": "http://localhost:4000",
-    "identityUri": "http://localhost:33656",
-    "iconsUri": "https://icons.bitwarden.com",
-    "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD",
-    "braintreeKey": "sandbox_r72q8jq6_9pnxkwm75f87sdc2",
-    "whitelistDomains": [
-      "localhost"
-    ]
-  }
-}

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

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

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

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

src/app/accounts/accountsLoginController.js

@@ -1,278 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsLoginController', function ($scope, $rootScope, $cookies, apiService, cryptoService, authService,
-        $state, constants, $analytics, $uibModal, $timeout, $window, $filter, toastr) {
-        $scope.state = $state;
-        $scope.twoFactorProviderConstants = constants.twoFactorProvider;
-        $scope.rememberTwoFactor = { checked: false };
-        var stopU2fCheck = true;
-
-        $scope.returnState = $state.params.returnState;
-        $scope.stateEmail = $state.params.email;
-        if (!$scope.returnState && $state.params.org) {
-            $scope.returnState = {
-                name: 'backend.user.settingsCreateOrg',
-                params: { plan: $state.params.org }
-            };
-        }
-        else if (!$scope.returnState && $state.params.premium) {
-            $scope.returnState = {
-                name: 'backend.user.settingsPremium'
-            };
-        }
-
-        if ($state.current.name.indexOf('twoFactor') > -1 && (!$scope.twoFactorProviders || !$scope.twoFactorProviders.length)) {
-            $state.go('frontend.login.info', { returnState: $scope.returnState });
-        }
-
-        var rememberedEmail = $cookies.get(constants.rememberedEmailCookieName);
-        if (rememberedEmail || $scope.stateEmail) {
-            $scope.model = {
-                email: $scope.stateEmail || rememberedEmail,
-                rememberEmail: rememberedEmail !== null
-            };
-
-            $timeout(function () {
-                $("#masterPassword").focus();
-            });
-        }
-        else {
-            $timeout(function () {
-                $("#email").focus();
-            });
-        }
-
-        var _email,
-            _masterPassword;
-
-        $scope.twoFactorProviders = null;
-        $scope.twoFactorProvider = null;
-
-        $scope.login = function (model) {
-            $scope.loginPromise = authService.logIn(model.email, model.masterPassword).then(function (twoFactorProviders) {
-                if (model.rememberEmail) {
-                    var cookieExpiration = new Date();
-                    cookieExpiration.setFullYear(cookieExpiration.getFullYear() + 10);
-
-                    $cookies.put(
-                        constants.rememberedEmailCookieName,
-                        model.email,
-                        { expires: cookieExpiration });
-                }
-                else {
-                    $cookies.remove(constants.rememberedEmailCookieName);
-                }
-
-                if (twoFactorProviders && Object.keys(twoFactorProviders).length > 0) {
-                    _email = model.email;
-                    _masterPassword = model.masterPassword;
-
-                    $scope.twoFactorProviders = cleanProviders(twoFactorProviders);
-                    $scope.twoFactorProvider = getDefaultProvider($scope.twoFactorProviders);
-
-                    $analytics.eventTrack('Logged In To Two-step');
-                    $state.go('frontend.login.twoFactor', { returnState: $scope.returnState }).then(function () {
-                        $timeout(function () {
-                            $("#code").focus();
-                            init();
-                        });
-                    });
-                }
-                else {
-                    $analytics.eventTrack('Logged In');
-                    loggedInGo();
-                }
-
-                model.masterPassword = '';
-            });
-        };
-
-        function getDefaultProvider(twoFactorProviders) {
-            var keys = Object.keys(twoFactorProviders);
-            var providerType = null;
-            var providerPriority = -1;
-            for (var i = 0; i < keys.length; i++) {
-                var provider = $filter('filter')(constants.twoFactorProviderInfo, { type: keys[i], active: true });
-                if (provider.length && provider[0].priority > providerPriority) {
-                    if (provider[0].type === constants.twoFactorProvider.u2f && !u2f.isSupported) {
-                        continue;
-                    }
-
-                    providerType = provider[0].type;
-                    providerPriority = provider[0].priority;
-                }
-            }
-
-            if (providerType === null) {
-                return null;
-            }
-
-            return parseInt(providerType);
-        }
-
-        function cleanProviders(twoFactorProviders) {
-            if (canUseSecurityKey()) {
-                return twoFactorProviders;
-            }
-
-            var keys = Object.keys(twoFactorProviders);
-            for (var i = 0; i < keys.length; i++) {
-                var provider = $filter('filter')(constants.twoFactorProviderInfo, {
-                    type: keys[i],
-                    active: true,
-                    requiresUsb: false
-                });
-                if (!provider.length) {
-                    delete twoFactorProviders[keys[i]];
-                }
-            }
-
-            return twoFactorProviders;
-        }
-
-        // ref: https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
-        function canUseSecurityKey() {
-            var mobile = false;
-            (function (a) {
-                if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) {
-                    mobile = true;
-                }
-            })(navigator.userAgent || navigator.vendor || window.opera);
-
-            return !mobile && !navigator.userAgent.match(/iPad/i);
-        }
-
-        $scope.twoFactor = function (token) {
-            if ($scope.twoFactorProvider === constants.twoFactorProvider.email ||
-                $scope.twoFactorProvider === constants.twoFactorProvider.authenticator) {
-                token = token.replace(' ', '');
-            }
-
-            $scope.twoFactorPromise = authService.logIn(_email, _masterPassword, token, $scope.twoFactorProvider,
-                $scope.rememberTwoFactor.checked || false);
-
-            $scope.twoFactorPromise.then(function () {
-                $analytics.eventTrack('Logged In From Two-step');
-                loggedInGo();
-            }, function () {
-                if ($scope.twoFactorProvider === constants.twoFactorProvider.u2f) {
-                    init();
-                }
-            });
-        };
-
-        $scope.anotherMethod = function () {
-            var modal = $uibModal.open({
-                animation: true,
-                templateUrl: 'app/accounts/views/accountsTwoFactorMethods.html',
-                controller: 'accountsTwoFactorMethodsController',
-                resolve: {
-                    providers: function () { return $scope.twoFactorProviders; }
-                }
-            });
-
-            modal.result.then(function (provider) {
-                $scope.twoFactorProvider = provider;
-                $timeout(function () {
-                    $("#code").focus();
-                    init();
-                });
-            });
-        };
-
-        $scope.sendEmail = function (doToast) {
-            if ($scope.twoFactorProvider !== constants.twoFactorProvider.email) {
-                return;
-            }
-
-            return cryptoService.makeKeyAndHash(_email, _masterPassword).then(function (result) {
-                return apiService.twoFactor.sendEmailLogin({
-                    email: _email,
-                    masterPasswordHash: result.hash
-                }).$promise;
-            }).then(function () {
-                if (doToast) {
-                    toastr.success('Verification email sent to ' + $scope.twoFactorEmail + '.');
-                }
-            }, function () {
-                toastr.error('Could not send verification email.');
-            });
-        };
-
-        $scope.$on('$destroy', function () {
-            stopU2fCheck = true;
-        });
-
-        function loggedInGo() {
-            if ($scope.returnState) {
-                $state.go($scope.returnState.name, $scope.returnState.params);
-            }
-            else {
-                $state.go('backend.user.vault');
-            }
-        }
-
-        function init() {
-            stopU2fCheck = true;
-            var params;
-            if ($scope.twoFactorProvider === constants.twoFactorProvider.duo) {
-                params = $scope.twoFactorProviders[constants.twoFactorProvider.duo];
-
-                $window.Duo.init({
-                    host: params.Host,
-                    sig_request: params.Signature,
-                    submit_callback: function (theForm) {
-                        var response = $(theForm).find('input[name="sig_response"]').val();
-                        $scope.twoFactor(response);
-                    }
-                });
-            }
-            else if ($scope.twoFactorProvider === constants.twoFactorProvider.u2f) {
-                stopU2fCheck = false;
-                params = $scope.twoFactorProviders[constants.twoFactorProvider.u2f];
-                var challenges = JSON.parse(params.Challenges);
-
-                initU2f(challenges);
-            }
-            else if ($scope.twoFactorProvider === constants.twoFactorProvider.email) {
-                params = $scope.twoFactorProviders[constants.twoFactorProvider.email];
-                $scope.twoFactorEmail = params.Email;
-                if (Object.keys($scope.twoFactorProviders).length > 1) {
-                    $scope.sendEmail(false);
-                }
-            }
-        }
-
-        function initU2f(challenges) {
-            if (stopU2fCheck) {
-                return;
-            }
-
-            if (challenges.length < 1 || $scope.twoFactorProvider !== constants.twoFactorProvider.u2f) {
-                return;
-            }
-
-            console.log('listening for u2f key...');
-
-            $window.u2f.sign(challenges[0].appId, challenges[0].challenge, [{
-                version: challenges[0].version,
-                keyHandle: challenges[0].keyHandle
-            }], function (data) {
-                if ($scope.twoFactorProvider !== constants.twoFactorProvider.u2f) {
-                    return;
-                }
-
-                if (data.errorCode) {
-                    console.log(data.errorCode);
-
-                    $timeout(function () {
-                        initU2f(challenges);
-                    }, data.errorCode === 5 ? 0 : 1000);
-
-                    return;
-                }
-                $scope.twoFactor(JSON.stringify(data));
-            }, 10);
-        }
-    });

src/app/accounts/accountsLogoutController.js

@@ -1,8 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsLogoutController', function ($scope, authService, $state, $analytics) {
-        authService.logOut();
-        $analytics.eventTrack('Logged Out');
-        $state.go('frontend.login.info');
-    });

src/app/accounts/accountsModule.js

@@ -1,2 +0,0 @@
-angular
-    .module('bit.accounts', ['ui.bootstrap', 'ngCookies']);

src/app/accounts/accountsOrganizationAcceptController.js

@@ -1,45 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsOrganizationAcceptController', function ($scope, $state, apiService, authService, toastr, $analytics) {
-        $scope.state = {
-            name: $state.current.name,
-            params: $state.params
-        };
-
-        if (!$state.params.organizationId || !$state.params.organizationUserId || !$state.params.token ||
-            !$state.params.email || !$state.params.organizationName) {
-            $state.go('frontend.login.info').then(function () {
-                toastr.error('Invalid parameters.');
-            });
-            return;
-        }
-
-        $scope.$on('$viewContentLoaded', function () {
-            if (authService.isAuthenticated()) {
-                $scope.accepting = true;
-                apiService.organizationUsers.accept(
-                    {
-                        orgId: $state.params.organizationId,
-                        id: $state.params.organizationUserId
-                    },
-                    {
-                        token: $state.params.token
-                    }, function () {
-                        $analytics.eventTrack('Accepted Invitation');
-                        $state.go('backend.user.vault', null, { location: 'replace' }).then(function () {
-                            toastr.success('You can access this organization once an administrator confirms your membership.' +
-                                ' We\'ll send an email when that happens.', 'Invite Accepted', { timeOut: 10000 });
-                        });
-                    }, function () {
-                        $analytics.eventTrack('Failed To Accept Invitation');
-                        $state.go('backend.user.vault', null, { location: 'replace' }).then(function () {
-                            toastr.error('Unable to accept invitation.', 'Error');
-                        });
-                    });
-            }
-            else {
-                $scope.loading = false;
-            }
-        });
-    });

src/app/accounts/accountsPasswordHintController.js

@@ -1,13 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsPasswordHintController', function ($scope, $rootScope, apiService, $analytics) {
-        $scope.success = false;
-
-        $scope.submit = function (model) {
-            $scope.submitPromise = apiService.accounts.postPasswordHint({ email: model.email }, function () {
-                $analytics.eventTrack('Requested Password Hint');
-                $scope.success = true;
-            }).$promise;
-        };
-    });

src/app/accounts/accountsRecoverController.js

@@ -1,21 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsRecoverController', function ($scope, apiService, cryptoService, $analytics) {
-        $scope.success = false;
-
-        $scope.submit = function (model) {
-            var email = model.email.toLowerCase();
-
-            $scope.submitPromise = cryptoService.makeKeyAndHash(model.email, model.masterPassword).then(function (result) {
-                return apiService.twoFactor.recover({
-                    email: email,
-                    masterPasswordHash: result.hash,
-                    recoveryCode: model.code.replace(/\s/g, '').toLowerCase()
-                }).$promise;
-            }).then(function () {
-                $analytics.eventTrack('Recovered 2FA');
-                $scope.success = true;
-            });
-        };
-    });

src/app/accounts/accountsRecoverDeleteController.js

@@ -1,13 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsRecoverDeleteController', function ($scope, $rootScope, apiService, $analytics) {
-        $scope.success = false;
-
-        $scope.submit = function (model) {
-            $scope.submitPromise = apiService.accounts.postDeleteRecover({ email: model.email }, function () {
-                $analytics.eventTrack('Started Delete Recovery');
-                $scope.success = true;
-            }).$promise;
-        };
-    });

src/app/accounts/accountsRegisterController.js

@@ -1,92 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsRegisterController', function ($scope, $location, apiService, cryptoService, validationService,
-        $analytics, $state, $timeout) {
-        var params = $location.search();
-        var stateParams = $state.params;
-        $scope.createOrg = stateParams.org;
-
-        if (!stateParams.returnState && stateParams.org) {
-            $scope.returnState = {
-                name: 'backend.user.settingsCreateOrg',
-                params: { plan: $state.params.org }
-            };
-        }
-        else if (!stateParams.returnState && stateParams.premium) {
-            $scope.returnState = {
-                name: 'backend.user.settingsPremium',
-                params: { plan: $state.params.org }
-            };
-        }
-        else {
-            $scope.returnState = stateParams.returnState;
-        }
-
-        $scope.success = false;
-        $scope.model = {
-            email: params.email ? params.email : stateParams.email
-        };
-        $scope.readOnlyEmail = stateParams.email !== null;
-
-
-        $timeout(function () {
-            if ($scope.model.email) {
-                $("#name").focus();
-            }
-            else {
-                $("#email").focus();
-            }
-        });
-
-        $scope.registerPromise = null;
-        $scope.register = function (form) {
-            var error = false;
-
-            if ($scope.model.masterPassword.length < 8) {
-                validationService.addError(form, 'MasterPassword', 'Master password must be at least 8 characters long.', true);
-                error = true;
-            }
-            if ($scope.model.masterPassword !== $scope.model.confirmMasterPassword) {
-                validationService.addError(form, 'ConfirmMasterPassword', 'Master password confirmation does not match.', true);
-                error = true;
-            }
-
-            if (error) {
-                return;
-            }
-
-            var email = $scope.model.email.toLowerCase();
-            var makeResult, encKey;
-
-            $scope.registerPromise = cryptoService.makeKeyAndHash(email, $scope.model.masterPassword).then(function (result) {
-                makeResult = result;
-                encKey = cryptoService.makeEncKey(result.key);
-                return cryptoService.makeKeyPair(encKey.encKey);
-            }).then(function (result) {
-                var request = {
-                    name: $scope.model.name,
-                    email: email,
-                    masterPasswordHash: makeResult.hash,
-                    masterPasswordHint: $scope.model.masterPasswordHint,
-                    key: encKey.encKeyEnc,
-                    keys: {
-                        publicKey: result.publicKey,
-                        encryptedPrivateKey: result.privateKeyEnc
-                    }
-                };
-
-                return apiService.accounts.register(request).$promise;
-            }, function (errors) {
-                validationService.addError(form, null, 'Problem generating keys.', true);
-                return false;
-            }).then(function (result) {
-                if (result === false) {
-                    return;
-                }
-
-                $scope.success = true;
-                $analytics.eventTrack('Registered');
-            });
-        };
-    });

src/app/accounts/accountsTwoFactorMethodsController.js

@@ -1,40 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsTwoFactorMethodsController', function ($scope, $uibModalInstance, $analytics, providers, constants) {
-        $analytics.eventTrack('accountsTwoFactorMethodsController', { category: 'Modal' });
-
-        $scope.providers = [];
-
-        if (providers.hasOwnProperty(constants.twoFactorProvider.authenticator)) {
-            add(constants.twoFactorProvider.authenticator);
-        }
-        if (providers.hasOwnProperty(constants.twoFactorProvider.yubikey)) {
-            add(constants.twoFactorProvider.yubikey);
-        }
-        if (providers.hasOwnProperty(constants.twoFactorProvider.email)) {
-            add(constants.twoFactorProvider.email);
-        }
-        if (providers.hasOwnProperty(constants.twoFactorProvider.duo)) {
-            add(constants.twoFactorProvider.duo);
-        }
-        if (providers.hasOwnProperty(constants.twoFactorProvider.u2f) && u2f.isSupported) {
-            add(constants.twoFactorProvider.u2f);
-        }
-
-        $scope.choose = function (provider) {
-            $uibModalInstance.close(provider.type);
-        };
-
-        $scope.close = function () {
-            $uibModalInstance.dismiss('close');
-        };
-
-        function add(type) {
-            for (var i = 0; i < constants.twoFactorProviderInfo.length; i++) {
-                if (constants.twoFactorProviderInfo[i].type === type) {
-                    $scope.providers.push(constants.twoFactorProviderInfo[i]);
-                }
-            }
-        }
-    });

src/app/accounts/accountsVerifyEmailController.js

@@ -1,28 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsVerifyEmailController', function ($scope, $state, apiService, toastr, $analytics) {
-        if (!$state.params.userId || !$state.params.token) {
-            $state.go('frontend.login.info').then(function () {
-                toastr.error('Invalid parameters.');
-            });
-            return;
-        }
-
-        $scope.$on('$viewContentLoaded', function () {
-            apiService.accounts.verifyEmailToken({},
-                {
-                    token: $state.params.token,
-                    userId: $state.params.userId
-                }, function () {
-                    $analytics.eventTrack('Verified Email');
-                    $state.go('frontend.login.info', null, { location: 'replace' }).then(function () {
-                        toastr.success('Your email has been verified. Thank you.', 'Success');
-                    });
-                }, function () {
-                    $state.go('frontend.login.info', null, { location: 'replace' }).then(function () {
-                        toastr.error('Unable to verify email.', 'Error');
-                    });
-                });
-        });
-    });

src/app/accounts/accountsVerifyRecoverDeleteController.js

@@ -1,36 +0,0 @@
-angular
-    .module('bit.accounts')
-
-    .controller('accountsVerifyRecoverDeleteController', function ($scope, $state, apiService, toastr, $analytics) {
-        if (!$state.params.userId || !$state.params.token || !$state.params.email) {
-            $state.go('frontend.login.info').then(function () {
-                toastr.error('Invalid parameters.');
-            });
-            return;
-        }
-
-        $scope.email = $state.params.email;
-
-        $scope.delete = function () {
-            if (!confirm('Are you sure you want to delete this account? This cannot be undone.')) {
-                return;
-            }
-
-            $scope.deleting = true;
-            apiService.accounts.postDeleteRecoverToken({},
-                {
-                    token: $state.params.token,
-                    userId: $state.params.userId
-                }, function () {
-                    $analytics.eventTrack('Recovered Delete');
-                    $state.go('frontend.login.info', null, { location: 'replace' }).then(function () {
-                        toastr.success('Your account has been deleted. You can register a new account again if you like.',
-                            'Success');
-                    });
-                }, function () {
-                    $state.go('frontend.login.info', null, { location: 'replace' }).then(function () {
-                        toastr.error('Unable to delete account.', 'Error');
-                    });
-                });
-        };
-    });

src/app/accounts/hint.component.html

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

src/app/accounts/hint.component.ts

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

src/app/accounts/lock.component.html

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

src/app/accounts/lock.component.ts

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

src/app/accounts/login.component.html

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

src/app/accounts/login.component.ts

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

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

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

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

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

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

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

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

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

src/app/accounts/register.component.html

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

src/app/accounts/register.component.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/accounts/views/accountsLogin.html

@@ -1,7 +0,0 @@
-<div class="login-box">
-    <div class="login-logo">
-        <i class="fa fa-shield"></i> <b>bit</b>warden
-    </div>
-    <div class="login-box-body" ui-view>
-    </div>
-</div>

src/app/accounts/views/accountsLoginInfo.html

@@ -1,49 +0,0 @@
-<p class="login-box-msg">Log in to access your vault.</p>
-<form name="loginForm" ng-submit="loginForm.$valid && login(model)" api-form="loginPromise">
-    <div class="callout callout-danger validation-errors" ng-show="loginForm.$errors">
-        <h4>Errors have occurred</h4>
-        <ul>
-            <li ng-repeat="e in loginForm.$errors">{{e}}</li>
-        </ul>
-    </div>
-    <div class="form-group has-feedback" show-errors>
-        <label for="email" class="sr-only">Email</label>
-        <input type="email" id="email" name="Email" class="form-control" placeholder="Email" ng-model="model.email"
-               required api-field />
-        <span class="fa fa-envelope form-control-feedback"></span>
-    </div>
-    <div class="form-group has-feedback" show-errors>
-        <label for="masterPassword" class="sr-only">Master Password</label>
-        <input type="password" id="masterPassword" name="MasterPasswordHash" class="form-control" placeholder="Master Password"
-               ng-model="model.masterPassword"
-               required api-field />
-        <span class="fa fa-lock form-control-feedback"></span>
-    </div>
-    <div class="row">
-        <div class="col-xs-7">
-            <div class="checkbox">
-                <label>
-                    <input type="checkbox" id="rememberEmail" ng-model="model.rememberEmail" /> Remember Email
-                </label>
-            </div>
-        </div>
-        <div class="col-xs-5">
-            <button type="submit" class="btn btn-primary btn-block btn-flat" ng-disabled="loginForm.$loading">
-                <i class="fa fa-refresh fa-spin loading-icon" ng-show="loginForm.$loading"></i>Log In
-            </button>
-        </div>
-    </div>
-    <hr />
-    <ul>
-        <li>
-            <a ui-sref="frontend.register({returnState: returnState, email: stateEmail})">
-                Create a new account
-            </a>
-        </li>
-        <li>
-            <a ui-sref="frontend.passwordHint">
-                Get master password hint
-            </a>
-        </li>
-    </ul>
-</form>

src/app/accounts/views/accountsLoginTwoFactor.html

@@ -1,166 +0,0 @@
-<div ng-if="twoFactorProvider === twoFactorProviderConstants.authenticator ||
-     twoFactorProvider === twoFactorProviderConstants.email">
-    <p class="login-box-msg" ng-if="twoFactorProvider === twoFactorProviderConstants.authenticator">
-        Enter the 6 digit verification code from your authenticator app.
-    </p>
-    <div ng-if="twoFactorProvider === twoFactorProviderConstants.email" class="text-center">
-        <p class="login-box-msg">
-            Enter the 6 digit verification code that was emailed to <b>{{twoFactorEmail}}</b>.
-        </p>
-        <p>
-            Didn't get the email?
-            <a href="#" stop-click ng-click="sendEmail(true)" ng-if="twoFactorProvider === twoFactorProviderConstants.email">
-                Send it again
-            </a>
-        </p>
-    </div>
-    <form name="twoFactorForm" ng-submit="twoFactorForm.$valid && twoFactor(token)" api-form="twoFactorPromise">
-        <div class="callout callout-danger validation-errors" ng-show="twoFactorForm.$errors">
-            <h4>Errors have occurred</h4>
-            <ul>
-                <li ng-repeat="e in twoFactorForm.$errors">{{e}}</li>
-            </ul>
-        </div>
-        <div class="form-group has-feedback" show-errors>
-            <label for="code" class="sr-only">Code</label>
-            <input type="text" id="code" name="Code" class="form-control" placeholder="Verification code"
-                   ng-model="token" required api-field autocomplete="off" autocorrect="off" autocapitalize="off"
-                   spellcheck="false" />
-            <span class="fa fa-lock form-control-feedback"></span>
-        </div>
-        <div class="row">
-            <div class="col-xs-7">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" id="rememberMe" ng-model="rememberTwoFactor.checked" /> Remember Me
-                    </label>
-                </div>
-            </div>
-            <div class="col-xs-5">
-                <button type="submit" class="btn btn-primary btn-block btn-flat" ng-disabled="twoFactorForm.$loading">
-                    <i class="fa fa-refresh fa-spin loading-icon" ng-show="twoFactorForm.$loading"></i>Log In
-                </button>
-            </div>
-        </div>
-    </form>
-</div>
-
-<div ng-if="twoFactorProvider === twoFactorProviderConstants.yubikey">
-    <p class="login-box-msg">
-        Complete logging in with YubiKey.
-    </p>
-    <form name="twoFactorForm" ng-submit="twoFactorForm.$valid && twoFactor(token)" api-form="twoFactorPromise" 
-          autocomplete="off">
-        <div class="callout callout-danger validation-errors" ng-show="twoFactorForm.$errors">
-            <h4>Errors have occurred</h4>
-            <ul>
-                <li ng-repeat="e in twoFactorForm.$errors">{{e}}</li>
-            </ul>
-        </div>
-        <p>Insert your YubiKey into your computer's USB port, then touch its button.</p>
-        <p>
-            <img src="images/two-factor/yubikey.jpg" alt="" class="img-rounded img-responsive" />
-        </p>
-        <div class="form-group" show-errors>
-            <label for="code" class="sr-only">Token</label>
-            <input type="password" id="code" name="Token" class="form-control" ng-model="token" required api-field />
-        </div>
-        <div class="row">
-            <div class="col-xs-7">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" id="rememberMe" ng-model="rememberTwoFactor.checked" /> Remember Me
-                    </label>
-                </div>
-            </div>
-            <div class="col-xs-5">
-                <button type="submit" class="btn btn-primary btn-block btn-flat" ng-disabled="twoFactorForm.$loading">
-                    <i class="fa fa-refresh fa-spin loading-icon" ng-show="twoFactorForm.$loading"></i>Log In
-                </button>
-            </div>
-        </div>
-    </form>
-</div>
-
-<div ng-if="twoFactorProvider === twoFactorProviderConstants.duo">
-    <p class="login-box-msg">
-        Complete logging in with Duo.
-    </p>
-    <form name="twoFactorForm" ng-submit="twoFactorForm.$valid && twoFactor(token)" api-form="twoFactorPromise" 
-          autocomplete="off">
-        <div class="callout callout-danger validation-errors" ng-show="twoFactorForm.$errors">
-            <h4>Errors have occurred</h4>
-            <ul>
-                <li ng-repeat="e in twoFactorForm.$errors">{{e}}</li>
-            </ul>
-        </div>
-        <div id="duoFrameWrapper">
-            <iframe id="duo_iframe"></iframe>
-        </div>
-        <div class="row">
-            <div class="col-xs-7">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" id="rememberMe" ng-model="rememberTwoFactor.checked" /> Remember Me
-                    </label>
-                </div>
-            </div>
-            <div class="col-xs-5">
-                <span ng-show="twoFactorForm.$loading">
-                    <i class="fa fa-refresh fa-spin loading-icon"></i> Logging in...
-                </span>
-            </div>
-        </div>
-    </form>
-</div>
-
-<div ng-if="twoFactorProvider === twoFactorProviderConstants.u2f">
-    <p class="login-box-msg">
-        Complete logging in with FIDO U2F.
-    </p>
-    <form name="twoFactorForm" api-form="twoFactorPromise" autocomplete="off">
-        <div class="callout callout-danger validation-errors" ng-show="twoFactorForm.$errors">
-            <h4>Errors have occurred</h4>
-            <ul>
-                <li ng-repeat="e in twoFactorForm.$errors">{{e}}</li>
-            </ul>
-        </div>
-        <p>Insert your Security Key into your computer's USB port. If it has a button, touch it.</p>
-        <p>
-            <img src="images/two-factor/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
-        </p>
-        <div class="row">
-            <div class="col-xs-7">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" id="rememberMe" ng-model="rememberTwoFactor.checked" /> Remember Me
-                    </label>
-                </div>
-            </div>
-            <div class="col-xs-5">
-                <span ng-show="twoFactorForm.$loading">
-                    <i class="fa fa-refresh fa-spin loading-icon"></i> Logging in...
-                </span>
-            </div>
-        </div>
-    </form>
-</div>
-
-<div ng-if="twoFactorProvider === null">
-    <p>
-        This account has two-step login enabled, however, none of the configured two-step providers are supported by this
-        web browser.
-    </p>
-    Please use a supported web browser (such as Chrome) and/or add additional providers that are better supported
-    across web browsers (such as an authenticator app).
-</div>
-
-<hr />
-<ul>
-    <li>
-        <a stop-click href="#" ng-click="anotherMethod()">Use another two-step login method</a>
-    </li>
-    <li>
-        <a ui-sref="frontend.login.info({returnState: returnState})">Back to log in</a>
-    </li>
-</ul>

src/app/accounts/views/accountsOrganizationAccept.html

@@ -1,32 +0,0 @@
-<div class="login-box">
-    <div class="login-logo">
-        <i class="fa fa-shield"></i> <b>bit</b>warden
-    </div>
-    <div class="login-box-body">
-        <div ng-show="loading">
-            Loading...
-        </div>
-        <div ng-show="accepting">
-            Accepting invitation...
-        </div>
-        <div ng-show="!loading && !accepting">
-            <p class="login-box-msg">Join {{state.params.organizationName}}</p>
-            <p class="text-center"><strong>{{state.params.email}}</strong></p>
-            <p>
-                You've been invited to join the organization listed above.
-                To accept the invitation, you need to log in or create a new bitwarden account.
-            </p>
-            <hr />
-            <div class="row">
-                <div class="col-sm-6">
-                    <a ui-sref="frontend.login.info({returnState: state, email: state.params.email})"
-                       class="btn btn-primary btn-block btn-flat">Log In</a>
-                </div>
-                <div class="col-sm-6">
-                    <a ui-sref="frontend.register({returnState: state, email: state.params.email})"
-                       class="btn btn-primary btn-block btn-flat">Create Account</a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

src/app/accounts/views/accountsPasswordHint.html

@@ -1,39 +0,0 @@
-<div class="login-box">
-    <div class="login-logo">
-        <i class="fa fa-shield"></i> <b>bit</b>warden
-    </div>
-    <div class="login-box-body">
-        <p class="login-box-msg">Get your master password hint.</p>
-        <div class="text-center" ng-show="success">
-            <div class="callout callout-success">
-                If your account exists ({{model.email}}) we've sent you an email with your master password hint.
-            </div>
-            <a ui-sref="frontend.login.info">Ready to log in?</a>
-        </div>
-        <form name="passwordHintForm" ng-submit="passwordHintForm.$valid && submit(model)" ng-show="!success"
-              api-form="submitPromise">
-            <div class="callout callout-danger validation-errors" ng-show="passwordHintForm.$errors">
-                <h4>Errors have occurred</h4>
-                <ul>
-                    <li ng-repeat="e in passwordHintForm.$errors">{{e}}</li>
-                </ul>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label for="email" class="sr-only">Your account email address</label>
-                <input type="email" id="email" name="Email" class="form-control" placeholder="Your account email address"
-                       ng-model="model.email" required api-field />
-                <span class="fa fa-envelope form-control-feedback"></span>
-            </div>
-            <div class="row">
-                <div class="col-xs-7">
-                    <a ui-sref="frontend.login.info">Ready to log in?</a>
-                </div>
-                <div class="col-xs-5">
-                    <button type="submit" class="btn btn-primary btn-block btn-flat" ng-disabled="passwordHintForm.$loading">
-                        <i class="fa fa-refresh fa-spin loading-icon" ng-show="passwordHintForm.$loading"></i>Submit
-                    </button>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>

src/app/accounts/views/accountsRecover.html

@@ -1,56 +0,0 @@
-<div class="login-box">
-    <div class="login-logo">
-        <i class="fa fa-shield"></i> <b>bit</b>warden
-    </div>
-    <div class="login-box-body">
-        <p class="login-box-msg">
-            In the event that you cannot access your account through your normal two-step login methods, you can use your
-            two-step login recovery code to disable all two-step providers on your account.
-            <a href="https://help.bitwarden.com/article/lost-two-step-device/" target="_blank">Learn more</a>
-        </p>
-        <div class="text-center" ng-show="success">
-            <div class="callout callout-success">
-                Two-step login has been successfully disabled on your account.
-            </div>
-            <a ui-sref="frontend.login.info">Ready to log in?</a>
-        </div>
-        <form name="recoverForm" ng-submit="recoverForm.$valid && submit(model)" ng-show="!success"
-              api-form="submitPromise">
-            <div class="callout callout-danger validation-errors" ng-show="recoverForm.$errors">
-                <h4>Errors have occurred</h4>
-                <ul>
-                    <li ng-repeat="e in recoverForm.$errors">{{e}}</li>
-                </ul>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label for="email" class="sr-only">Email</label>
-                <input type="email" id="email" name="Email" class="form-control" placeholder="Email" ng-model="model.email"
-                       required api-field />
-                <span class="fa fa-envelope form-control-feedback"></span>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label for="masterPassword" class="sr-only">Master Password</label>
-                <input type="password" id="masterPassword" name="MasterPasswordHash" class="form-control" placeholder="Master Password"
-                       ng-model="model.masterPassword"
-                       required api-field />
-                <span class="fa fa-lock form-control-feedback"></span>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label for="code" class="sr-only">Recovery code</label>
-                <input type="text" id="code" name="RecoveryCode" class="form-control" placeholder="Recovery code"
-                       ng-model="model.code" required api-field />
-                <span class="fa fa-key form-control-feedback"></span>
-            </div>
-            <div class="row">
-                <div class="col-xs-7">
-                    <a ui-sref="frontend.login.info">Ready to log in?</a>
-                </div>
-                <div class="col-xs-5">
-                    <button type="submit" class="btn btn-primary btn-block btn-flat" ng-disabled="recoverForm.$loading">
-                        <i class="fa fa-refresh fa-spin loading-icon" ng-show="recoverForm.$loading"></i>Submit
-                    </button>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>

src/app/accounts/views/accountsRecoverDelete.html

@@ -1,39 +0,0 @@
-<div class="login-box">
-    <div class="login-logo">
-        <i class="fa fa-shield"></i> <b>bit</b>warden
-    </div>
-    <div class="login-box-body">
-        <p class="login-box-msg">Enter your email address below to recover &amp; delete your bitwarden account.</p>
-        <div ng-show="success" class="text-center">
-            <div class="callout callout-success">
-                If your account exists ({{model.email}}) we've sent you an email with further instructions.
-            </div>
-            <a ui-sref="frontend.login.info">Return to log in</a>
-        </div>
-        <form name="form" ng-submit="form.$valid && submit(model)" ng-show="!success"
-              api-form="submitPromise">
-            <div class="callout callout-danger validation-errors" ng-show="form.$errors">
-                <h4>Errors have occurred</h4>
-                <ul>
-                    <li ng-repeat="e in form.$errors">{{e}}</li>
-                </ul>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label for="email" class="sr-only">Your account email address</label>
-                <input type="email" id="email" name="Email" class="form-control" placeholder="Your account email address"
-                       ng-model="model.email" required api-field />
-                <span class="fa fa-envelope form-control-feedback"></span>
-            </div>
-            <div class="row">
-                <div class="col-xs-7">
-                    <a ui-sref="frontend.login.info">Return to log in</a>
-                </div>
-                <div class="col-xs-5">
-                    <button type="submit" class="btn btn-primary btn-block btn-flat" ng-disabled="form.$loading">
-                        <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Submit
-                    </button>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>

src/app/accounts/views/accountsRegister.html

@@ -1,82 +0,0 @@
-<div class="register-box">
-    <div class="register-logo">
-        <i class="fa fa-shield"></i> <b>bit</b>warden
-    </div>
-    <div class="register-box-body">
-        <p class="login-box-msg">Create a new account.</p>
-        <div class="text-center" ng-show="success">
-            <div class="callout callout-success">
-                <h4>Account Created!</h4>
-                <p>You may now log in to your new account.</p>
-            </div>
-            <a ui-sref="frontend.login.info({returnState: returnState, email: model.email})">Ready to log in?</a>
-        </div>
-        <form name="registerForm" ng-submit="registerForm.$valid && register(registerForm)" ng-show="!success"
-              api-form="registerPromise">
-            <div class="callout callout-default" ng-show="createOrg">
-                <h4>Create Organization, Step 1</h4>
-                <p>Before creating your organization, you first need to create a free personal account.</p>
-            </div>
-            <div class="callout callout-danger validation-errors" ng-show="registerForm.$errors">
-                <h4>Errors have occurred</h4>
-                <ul>
-                    <li ng-repeat="e in registerForm.$errors">{{e}}</li>
-                </ul>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label for="email" class="sr-only">Email</label>
-                <input type="email" id="email" name="Email" class="form-control" placeholder="Email" ng-model="model.email"
-                       ng-readonly="readOnlyEmail" required api-field />
-                <span class="fa fa-envelope form-control-feedback"></span>
-                <p class="help-block">You'll use your email address to log in.</p>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label for="name" class="sr-only">Your Name</label>
-                <input type="text" id="name" name="Name" class="form-control" ng-model="model.name"
-                       placeholder="Your Name" api-field>
-                <span class="fa fa-user form-control-feedback"></span>
-                <p class="help-block">What should we call you?</p>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label for="masterPassword" class="sr-only">Master Password</label>
-                <input type="password" id="masterPassword" name="MasterPasswordHash" class="form-control"
-                       ng-model="model.masterPassword" placeholder="Master Password" required api-field>
-                <span class="fa fa-lock form-control-feedback"></span>
-                <p class="help-block">The master password is the password you use to access your vault.</p>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label form="confirmMasterPassword" class="sr-only">Re-type Master Password</label>
-                <input type="password" id="confirmMasterPassword" name="ConfirmMasterPassword" class="form-control"
-                       placeholder="Re-type Master Password"
-                       ng-model="model.confirmMasterPassword" required api-field>
-                <span class="fa fa-lock form-control-feedback"></span>
-                <p class="help-block">
-                    It is very important that you do not forget your master password.
-                    There is <u>no way</u> to recover the password in the event that you forget it.
-                </p>
-            </div>
-            <div class="form-group has-feedback" show-errors>
-                <label for="hint" class="sr-only">Master Password Hint (optional)</label>
-                <input type="text" id="hint" name="MasterPasswordHint" class="form-control" ng-model="model.masterPasswordHint"
-                       placeholder="Master Password Hint (optional)" api-field>
-                <span class="fa fa-lightbulb-o form-control-feedback"></span>
-                <p class="help-block">A master password hint can help you remember your password if you forget it.</p>
-            </div>
-            <div class="row">
-                <div class="col-xs-7">
-                    <a ui-sref="frontend.login.info({returnState: returnState})">Already have an account?</a>
-                </div>
-                <div class="col-xs-5">
-                    <button type="submit" class="btn btn-primary btn-block btn-flat" ng-disabled="registerForm.$loading">
-                        <i class="fa fa-refresh fa-spin loading-icon" ng-show="registerForm.$loading"></i>Submit
-                    </button>
-                </div>
-            </div>
-            <hr />
-            By clicking the above "Submit" button, you are agreeing to the
-            <a href="https://bitwarden.com/terms/" target="_blank">Terms of Service</a>
-            and the
-            <a href="https://bitwarden.com/privacy/" target="_blank">Privacy Policy</a>.
-        </form>
-    </div>
-</div>

src/app/accounts/views/accountsTwoFactorMethods.html

@@ -1,25 +0,0 @@
-<div class="modal-header">
-    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    <h4 class="modal-title"><i class="fa fa-key"></i> Two-step Providers</h4>
-</div>
-<div class="modal-body">
-    <div class="list-group" ng-repeat="provider in providers | orderBy: 'displayOrder'">
-        <a href="#" stop-click class="list-group-item" ng-click="choose(provider)">
-            <img alt="{{::provider.name}}" ng-src="{{'images/two-factor/' + provider.image}}" class="pull-right hidden-xs" />
-            <h4 class="list-group-item-heading">{{::provider.name}}</h4>
-            <p class="list-group-item-text">{{::provider.description}}</p>
-        </a>
-    </div>
-    <div class="list-group" style="margin-bottom: 0;">
-        <a href="https://help.bitwarden.com/article/lost-two-step-device/" target="_blank" class="list-group-item">
-            <h4 class="list-group-item-heading">Recovery Code</h4>
-            <p class="list-group-item-text">
-                Lost access to all of your two-factor providers? Use your recovery code to disable
-                all two-factor providers from your account.
-            </p>
-        </a>
-    </div>
-</div>
-<div class="modal-footer">
-    <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
-</div>

src/app/accounts/views/accountsVerifyEmail.html

@@ -1,8 +0,0 @@
-<div class="login-box">
-    <div class="login-logo">
-        <i class="fa fa-shield"></i> <b>bit</b>warden
-    </div>
-    <div class="login-box-body">
-        Verifying email...
-    </div>
-</div>

src/app/accounts/views/accountsVerifyRecoverDelete.html

@@ -1,21 +0,0 @@
-<div class="login-box">
-    <div class="login-logo">
-        <i class="fa fa-shield"></i> <b>bit</b>warden
-    </div>
-    <div class="login-box-body">
-        <div ng-if="deleting">
-            Deleting account...
-        </div>
-        <div ng-if="!deleting">
-            <div class="callout callout-warning">
-                <h4><i class="fa fa-warning fa-fw"></i> Warning</h4>
-                This will permanently delete your account. This cannot be undone.
-            </div>
-            <p>
-                You have requested to delete your bitwarden account (<b>{{email}}</b>).
-                Click the button below to confirm and proceed.
-            </p>
-            <button ng-click="delete()" class="btn btn-danger btn-block btn-flat">Delete Account</button>
-        </div>
-    </div>
-</div>

src/app/apiInterceptor.js

@@ -1,29 +0,0 @@
-angular
-    .module('bit')
-
-    .factory('apiInterceptor', function ($injector, $q, toastr) {
-        return {
-            request: function (config) {
-                return config;
-            },
-            response: function (response) {
-                if (response.status === 401 || response.status === 403) {
-                    $injector.get('authService').logOut();
-                    $injector.get('$state').go('frontend.login.info').then(function () {
-                        toastr.warning('Your login session has expired.', 'Logged out');
-                    });
-                }
-
-                return response || $q.when(response);
-            },
-            responseError: function (rejection) {
-                if (rejection.status === 401 || rejection.status === 403) {
-                    $injector.get('authService').logOut();
-                    $injector.get('$state').go('frontend.login.info').then(function () {
-                        toastr.warning('Your login session has expired.', 'Logged out');
-                    });
-                }
-                return $q.reject(rejection);
-            }
-        };
-    });

src/app/app-routing.module.ts

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

src/app/app.component.html

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

src/app/app.component.ts

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

src/app/app.js

@@ -1,27 +0,0 @@
-angular
-    .module('bit', [
-        'ui.router',
-        'ngMessages',
-        'angular-jwt',
-        'ui.bootstrap.showErrors',
-        'toastr',
-        'angulartics',
-        // @if !selfHosted
-        'angulartics.google.analytics',
-        'angular-stripe',
-        'credit-cards',
-        // @endif
-        'angular-promise-polyfill',
-
-        'bit.directives',
-        'bit.filters',
-        'bit.services',
-
-        'bit.global',
-        'bit.accounts',
-        'bit.vault',
-        'bit.settings',
-        'bit.tools',
-        'bit.organization',
-        'bit.reports'
-    ]);

src/app/app.module.ts

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

src/app/components/avatar.component.ts

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

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

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

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

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

src/app/config.js

@@ -1,390 +0,0 @@
-angular
-    .module('bit')
-
-    .config(function ($stateProvider, $urlRouterProvider, $httpProvider, jwtInterceptorProvider, jwtOptionsProvider,
-        $uibTooltipProvider, toastrConfig, $locationProvider, $qProvider, appSettings
-        // @if !selfHosted
-        /* jshint ignore:start */
-        , stripeProvider
-        /* jshint ignore:end */
-        // @endif
-    ) {
-        angular.extend(appSettings, window.bitwardenAppSettings);
-
-        $qProvider.errorOnUnhandledRejections(false);
-        $locationProvider.hashPrefix('');
-
-        var jwtConfig = {
-            whiteListedDomains: appSettings.whitelistDomains
-        };
-
-        if (!appSettings.selfHosted) {
-            var userAgent = navigator.userAgent.toLowerCase();
-            if (userAgent.indexOf('safari') > -1 && userAgent.indexOf('chrome') === -1) {
-                // Safari doesn't work with unconventional "Content-Language" header for CORS.
-                // See notes here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
-                jwtConfig.urlParam = 'access_token';
-            }
-            else {
-                // Using Content-Language header since it is unused and is a CORS-safelisted header. This avoids pre-flights.
-                jwtConfig.authHeader = 'Content-Language';
-            }
-        }
-
-        jwtOptionsProvider.config(jwtConfig);
-        var refreshPromise;
-        jwtInterceptorProvider.tokenGetter = /*@ngInject*/ function (options, tokenService, authService) {
-            if (options.url.indexOf(appSettings.apiUri) !== 0) {
-                return;
-            }
-
-            if (refreshPromise) {
-                return refreshPromise;
-            }
-
-            var token = tokenService.getToken();
-            if (!token) {
-                return;
-            }
-
-            if (!tokenService.tokenNeedsRefresh(token)) {
-                return token;
-            }
-
-            var p = authService.refreshAccessToken();
-            if (!p) {
-                return;
-            }
-
-            refreshPromise = p.then(function (newToken) {
-                refreshPromise = null;
-                return newToken || token;
-            });
-            return refreshPromise;
-        };
-
-        // @if !selfHosted
-        stripeProvider.setPublishableKey(appSettings.stripeKey);
-        // @endif
-
-        angular.extend(toastrConfig, {
-            closeButton: true,
-            progressBar: true,
-            showMethod: 'slideDown',
-            target: '.toast-target'
-        });
-
-        $uibTooltipProvider.options({
-            popupDelay: 600,
-            appendToBody: true
-        });
-
-        if ($httpProvider.defaults.headers.post) {
-            $httpProvider.defaults.headers.post = {};
-        }
-
-        $httpProvider.defaults.headers.post['Content-Type'] = 'text/plain; charset=utf-8';
-
-        // stop IE from caching get requests
-        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
-            if (!$httpProvider.defaults.headers.get) {
-                $httpProvider.defaults.headers.get = {};
-            }
-            $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
-            $httpProvider.defaults.headers.get.Pragma = 'no-cache';
-        }
-
-        $httpProvider.interceptors.push('apiInterceptor');
-        $httpProvider.interceptors.push('jwtInterceptor');
-
-        $urlRouterProvider.otherwise('/');
-
-        $stateProvider
-            // Backend
-            .state('backend', {
-                templateUrl: 'app/views/backendLayout.html',
-                abstract: true,
-                data: {
-                    authorize: true
-                }
-            })
-            .state('backend.user', {
-                templateUrl: 'app/views/userLayout.html',
-                abstract: true
-            })
-            .state('backend.user.vault', {
-                url: '^/vault',
-                templateUrl: 'app/vault/views/vault.html',
-                controller: 'vaultController',
-                data: {
-                    pageTitle: 'My Vault',
-                    controlSidebar: true
-                },
-                params: {
-                    refreshFromServer: false
-                }
-            })
-            .state('backend.user.shared', {
-                url: '^/shared',
-                templateUrl: 'app/vault/views/vaultShared.html',
-                controller: 'vaultSharedController',
-                data: { pageTitle: 'Shared' }
-            })
-            .state('backend.user.settings', {
-                url: '^/settings',
-                templateUrl: 'app/settings/views/settings.html',
-                controller: 'settingsController',
-                data: { pageTitle: 'Settings' }
-            })
-            .state('backend.user.settingsDomains', {
-                url: '^/settings/domains',
-                templateUrl: 'app/settings/views/settingsDomains.html',
-                controller: 'settingsDomainsController',
-                data: { pageTitle: 'Domain Settings' }
-            })
-            .state('backend.user.settingsTwoStep', {
-                url: '^/settings/two-step',
-                templateUrl: 'app/settings/views/settingsTwoStep.html',
-                controller: 'settingsTwoStepController',
-                data: { pageTitle: 'Two-step Login' }
-            })
-            .state('backend.user.settingsCreateOrg', {
-                url: '^/settings/create-organization',
-                templateUrl: 'app/settings/views/settingsCreateOrganization.html',
-                controller: 'settingsCreateOrganizationController',
-                data: { pageTitle: 'Create Organization' }
-            })
-            .state('backend.user.settingsBilling', {
-                url: '^/settings/billing',
-                templateUrl: 'app/settings/views/settingsBilling.html',
-                controller: 'settingsBillingController',
-                data: { pageTitle: 'Billing' }
-            })
-            .state('backend.user.settingsPremium', {
-                url: '^/settings/premium',
-                templateUrl: 'app/settings/views/settingsPremium.html',
-                controller: 'settingsPremiumController',
-                data: { pageTitle: 'Go Premium' }
-            })
-            .state('backend.user.tools', {
-                url: '^/tools',
-                templateUrl: 'app/tools/views/tools.html',
-                controller: 'toolsController',
-                data: { pageTitle: 'Tools' }
-            })
-            .state('backend.user.reportsBreach', {
-                url: '^/reports/breach',
-                templateUrl: 'app/reports/views/reportsBreach.html',
-                controller: 'reportsBreachController',
-                data: { pageTitle: 'Data Breach Report' }
-            })
-            .state('backend.user.apps', {
-                url: '^/apps',
-                templateUrl: 'app/views/apps.html',
-                controller: 'appsController',
-                data: { pageTitle: 'Get the Apps' }
-            })
-            .state('backend.org', {
-                templateUrl: 'app/views/organizationLayout.html',
-                abstract: true
-            })
-            .state('backend.org.dashboard', {
-                url: '^/organization/:orgId',
-                templateUrl: 'app/organization/views/organizationDashboard.html',
-                controller: 'organizationDashboardController',
-                data: { pageTitle: 'Organization Dashboard' }
-            })
-            .state('backend.org.people', {
-                url: '/organization/:orgId/people',
-                templateUrl: 'app/organization/views/organizationPeople.html',
-                controller: 'organizationPeopleController',
-                data: { pageTitle: 'Organization People' }
-            })
-            .state('backend.org.collections', {
-                url: '/organization/:orgId/collections',
-                templateUrl: 'app/organization/views/organizationCollections.html',
-                controller: 'organizationCollectionsController',
-                data: { pageTitle: 'Organization Collections' }
-            })
-            .state('backend.org.settings', {
-                url: '/organization/:orgId/settings',
-                templateUrl: 'app/organization/views/organizationSettings.html',
-                controller: 'organizationSettingsController',
-                data: { pageTitle: 'Organization Settings' }
-            })
-            .state('backend.org.billing', {
-                url: '/organization/:orgId/billing',
-                templateUrl: 'app/organization/views/organizationBilling.html',
-                controller: 'organizationBillingController',
-                data: { pageTitle: 'Organization Billing' }
-            })
-            .state('backend.org.vault', {
-                url: '/organization/:orgId/vault',
-                templateUrl: 'app/organization/views/organizationVault.html',
-                controller: 'organizationVaultController',
-                data: { pageTitle: 'Organization Vault' }
-            })
-            .state('backend.org.groups', {
-                url: '/organization/:orgId/groups',
-                templateUrl: 'app/organization/views/organizationGroups.html',
-                controller: 'organizationGroupsController',
-                data: { pageTitle: 'Organization Groups' }
-            })
-
-            // Frontend
-            .state('frontend', {
-                templateUrl: 'app/views/frontendLayout.html',
-                abstract: true,
-                data: {
-                    authorize: false
-                }
-            })
-            .state('frontend.login', {
-                templateUrl: 'app/accounts/views/accountsLogin.html',
-                controller: 'accountsLoginController',
-                params: {
-                    returnState: null,
-                    email: null,
-                    premium: null,
-                    org: null
-                },
-                data: {
-                    bodyClass: 'login-page'
-                }
-            })
-            .state('frontend.login.info', {
-                url: '^/?org&premium&email',
-                templateUrl: 'app/accounts/views/accountsLoginInfo.html',
-                data: {
-                    pageTitle: 'Log In'
-                }
-            })
-            .state('frontend.login.twoFactor', {
-                url: '^/two-step?org&premium&email',
-                templateUrl: 'app/accounts/views/accountsLoginTwoFactor.html',
-                data: {
-                    pageTitle: 'Log In (Two-step)'
-                }
-            })
-            .state('frontend.logout', {
-                url: '^/logout',
-                controller: 'accountsLogoutController',
-                data: {
-                    authorize: true
-                }
-            })
-            .state('frontend.passwordHint', {
-                url: '^/password-hint',
-                templateUrl: 'app/accounts/views/accountsPasswordHint.html',
-                controller: 'accountsPasswordHintController',
-                data: {
-                    pageTitle: 'Master Password Hint',
-                    bodyClass: 'login-page'
-                }
-            })
-            .state('frontend.recover', {
-                url: '^/recover',
-                templateUrl: 'app/accounts/views/accountsRecover.html',
-                controller: 'accountsRecoverController',
-                data: {
-                    pageTitle: 'Recover Account',
-                    bodyClass: 'login-page'
-                }
-            })
-            .state('frontend.recover-delete', {
-                url: '^/recover-delete',
-                templateUrl: 'app/accounts/views/accountsRecoverDelete.html',
-                controller: 'accountsRecoverDeleteController',
-                data: {
-                    pageTitle: 'Delete Account',
-                    bodyClass: 'login-page'
-                }
-            })
-            .state('frontend.verify-recover-delete', {
-                url: '^/verify-recover-delete?userId&token&email',
-                templateUrl: 'app/accounts/views/accountsVerifyRecoverDelete.html',
-                controller: 'accountsVerifyRecoverDeleteController',
-                data: {
-                    pageTitle: 'Confirm Delete Account',
-                    bodyClass: 'login-page'
-                }
-            })
-            .state('frontend.register', {
-                url: '^/register?org&premium',
-                templateUrl: 'app/accounts/views/accountsRegister.html',
-                controller: 'accountsRegisterController',
-                params: {
-                    returnState: null,
-                    email: null,
-                    org: null,
-                    premium: null
-                },
-                data: {
-                    pageTitle: 'Register',
-                    bodyClass: 'register-page'
-                }
-            })
-            .state('frontend.organizationAccept', {
-                url: '^/accept-organization?organizationId&organizationUserId&token&email&organizationName',
-                templateUrl: 'app/accounts/views/accountsOrganizationAccept.html',
-                controller: 'accountsOrganizationAcceptController',
-                data: {
-                    pageTitle: 'Accept Organization Invite',
-                    bodyClass: 'login-page',
-                    skipAuthorize: true
-                }
-            })
-            .state('frontend.verifyEmail', {
-                url: '^/verify-email?userId&token',
-                templateUrl: 'app/accounts/views/accountsVerifyEmail.html',
-                controller: 'accountsVerifyEmailController',
-                data: {
-                    pageTitle: 'Verifying Email',
-                    bodyClass: 'login-page',
-                    skipAuthorize: true
-                }
-            });
-    })
-    .run(function ($rootScope, authService, $state) {
-        $rootScope.$on('$stateChangeSuccess', function () {
-            $('html, body').animate({ scrollTop: 0 }, 200);
-        });
-
-        $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
-            if (!toState.data || !toState.data.authorize) {
-                if (toState.data && toState.data.skipAuthorize) {
-                    return;
-                }
-
-                if (!authService.isAuthenticated()) {
-                    return;
-                }
-
-                event.preventDefault();
-                $state.go('backend.user.vault');
-                return;
-            }
-
-            if (!authService.isAuthenticated()) {
-                event.preventDefault();
-                authService.logOut();
-                $state.go('frontend.login.info');
-                return;
-            }
-
-            // user is guaranteed to be authenticated becuase of previous check
-            if (toState.name.indexOf('backend.org.') > -1 && toParams.orgId) {
-                // clear vault rootScope when visiting org admin section
-                $rootScope.vaultCiphers = $rootScope.vaultFolders = null;
-
-                authService.getUserProfile().then(function (profile) {
-                    var orgs = profile.organizations;
-                    if (!orgs || !(toParams.orgId in orgs) || orgs[toParams.orgId].status !== 2 ||
-                        orgs[toParams.orgId].type === 2) {
-                        event.preventDefault();
-                        $state.go('backend.user.vault');
-                    }
-                });
-            }
-        });
-    });

src/app/constants.js

@@ -1,147 +0,0 @@
-angular.module('bit')
-    .constant('constants', {
-        rememberedEmailCookieName: 'bit.rememberedEmail',
-        encType: {
-            AesCbc256_B64: 0,
-            AesCbc128_HmacSha256_B64: 1,
-            AesCbc256_HmacSha256_B64: 2,
-            Rsa2048_OaepSha256_B64: 3,
-            Rsa2048_OaepSha1_B64: 4,
-            Rsa2048_OaepSha256_HmacSha256_B64: 5,
-            Rsa2048_OaepSha1_HmacSha256_B64: 6
-        },
-        orgUserType: {
-            owner: 0,
-            admin: 1,
-            user: 2
-        },
-        orgUserStatus: {
-            invited: 0,
-            accepted: 1,
-            confirmed: 2
-        },
-        twoFactorProvider: {
-            u2f: 4,
-            yubikey: 3,
-            duo: 2,
-            authenticator: 0,
-            email: 1,
-            remember: 5
-        },
-        cipherType: {
-            login: 1,
-            secureNote: 2,
-            card: 3,
-            identity: 4
-        },
-        fieldType: {
-            text: 0,
-            hidden: 1,
-            boolean: 2
-        },
-        twoFactorProviderInfo: [
-            {
-                type: 0,
-                name: 'Authenticator App',
-                description: 'Use an authenticator app (such as Authy or Google Authenticator) to generate time-based ' +
-                'verification codes.',
-                enabled: false,
-                active: true,
-                free: true,
-                image: 'authapp.png',
-                displayOrder: 0,
-                priority: 1,
-                requiresUsb: false
-            },
-            {
-                type: 3,
-                name: 'YubiKey OTP Security Key',
-                description: 'Use a YubiKey to access your account. Works with YubiKey 4, 4 Nano, 4C, and NEO devices.',
-                enabled: false,
-                active: true,
-                image: 'yubico.png',
-                displayOrder: 1,
-                priority: 3,
-                requiresUsb: true
-            },
-            {
-                type: 2,
-                name: 'Duo',
-                description: 'Verify with Duo Security using the Duo Mobile app, SMS, phone call, or U2F security key.',
-                enabled: false,
-                active: true,
-                image: 'duo.png',
-                displayOrder: 2,
-                priority: 2,
-                requiresUsb: false
-            },
-            {
-                type: 4,
-                name: 'FIDO U2F Security Key',
-                description: 'Use any FIDO U2F enabled security key to access your account.',
-                enabled: false,
-                active: true,
-                image: 'fido.png',
-                displayOrder: 3,
-                priority: 4,
-                requiresUsb: true
-            },
-            {
-                type: 1,
-                name: 'Email',
-                description: 'Verification codes will be emailed to you.',
-                enabled: false,
-                active: true,
-                free: true,
-                image: 'gmail.png',
-                displayOrder: 4,
-                priority: 0,
-                requiresUsb: false
-            }
-        ],
-        plans: {
-            free: {
-                basePrice: 0,
-                noAdditionalSeats: true,
-                noPayment: true,
-                upgradeSortOrder: -1
-            },
-            families: {
-                basePrice: 1,
-                annualBasePrice: 12,
-                baseSeats: 5,
-                noAdditionalSeats: true,
-                annualPlanType: 'familiesAnnually',
-                upgradeSortOrder: 1
-            },
-            teams: {
-                basePrice: 5,
-                annualBasePrice: 60,
-                monthlyBasePrice: 8,
-                baseSeats: 5,
-                seatPrice: 2,
-                annualSeatPrice: 24,
-                monthlySeatPrice: 2.5,
-                monthPlanType: 'teamsMonthly',
-                annualPlanType: 'teamsAnnually',
-                upgradeSortOrder: 2
-            },
-            enterprise: {
-                seatPrice: 3,
-                annualSeatPrice: 36,
-                monthlySeatPrice: 4,
-                monthPlanType: 'enterpriseMonthly',
-                annualPlanType: 'enterpriseAnnually',
-                upgradeSortOrder: 3
-            }
-        },
-        storageGb: {
-            price: 0.33,
-            monthlyPrice: 0.50,
-            yearlyPrice: 4
-        },
-        premium: {
-            price: 10,
-            yearlyPrice: 10
-        }
-    });

src/app/directives/apiFieldDirective.js

@@ -1,30 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('apiField', function () {
-        var linkFn = function (scope, element, attrs, ngModel) {
-            ngModel.$registerApiError = registerApiError;
-            ngModel.$validators.apiValidate = apiValidator;
-
-            function apiValidator() {
-                ngModel.$setValidity('api', true);
-                return true;
-            }
-
-            function registerApiError() {
-                ngModel.$setValidity('api', false);
-            }
-        };
-
-        return {
-            require: 'ngModel',
-            restrict: 'A',
-            compile: function (elem, attrs) {
-                if (!attrs.name || attrs.name === '') {
-                    throw 'api-field element does not have a valid name attribute';
-                }
-
-                return linkFn;
-            }
-        };
-    });

src/app/directives/apiFormDirective.js

@@ -1,45 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('apiForm', function ($rootScope, validationService, $timeout) {
-        return {
-            require: 'form',
-            restrict: 'A',
-            link: function (scope, element, attrs, formCtrl) {
-                var watchPromise = attrs.apiForm || null;
-                if (watchPromise !== void 0) {
-                    scope.$watch(watchPromise, formSubmitted.bind(null, formCtrl, scope));
-                }
-            }
-        };
-
-        function formSubmitted(form, scope, promise) {
-            if (!promise || !promise.then) {
-                return;
-            }
-
-            // reset errors
-            form.$errors = null;
-
-            // start loading
-            form.$loading = true;
-
-            promise.then(function success(response) {
-                $timeout(function () {
-                    form.$loading = false;
-                });
-            }, function failure(reason) {
-                $timeout(function () {
-                    form.$loading = false;
-                    if (typeof reason === 'string') {
-                        validationService.addError(form, null, reason, true);
-                    }
-                    else {
-                        validationService.addErrors(form, reason);
-                    }
-                    scope.$broadcast('show-errors-check-validity');
-                    $('html, body').animate({ scrollTop: 0 }, 200);
-                });
-            });
-        }
-    });

src/app/directives/directivesModule.js

@@ -1,2 +0,0 @@
-angular
-    .module('bit.directives', []);

src/app/directives/fallbackSrcDirective.js

@@ -1,11 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('fallbackSrc', function () {
-        return function (scope, element, attrs) {
-            var el = $(element);
-            el.bind('error', function (event) {
-                el.attr('src', attrs.fallbackSrc);
-            });
-        };
-    });

src/app/directives/letterAvatarDirective.js

@@ -1,151 +0,0 @@
-angular
-    .module('bit.directives')
-
-    // adaptation of https://github.com/uttesh/ngletteravatar
-    .directive('letterAvatar', function () {
-        // ref: http://stackoverflow.com/a/16348977/1090359
-        function stringToColor(str) {
-            var hash = 0,
-                i = 0;
-            for (i = 0; i < str.length; i++) {
-                hash = str.charCodeAt(i) + ((hash << 5) - hash);
-            }
-
-            var color = '#';
-            for (i = 0; i < 3; i++) {
-                var value = (hash >> (i * 8)) & 0xFF;
-                color += ('00' + value.toString(16)).substr(-2);
-            }
-
-            return color;
-        }
-
-        function getFirstLetters(data, count) {
-            var parts = data.split(' ');
-            if (parts && parts.length > 1) {
-                var text = '';
-                for (var i = 0; i < count; i++) {
-                    text += parts[i].substr(0, 1);
-                }
-                return text;
-            }
-
-            return null;
-        }
-
-        function getSvg(width, height, color) {
-            var svgTag = angular.element('<svg></svg>')
-                .attr({
-                    'xmlns': 'http://www.w3.org/2000/svg',
-                    'pointer-events': 'none',
-                    'width': width,
-                    'height': height
-                })
-                .css({
-                    'background-color': color,
-                    'width': width + 'px',
-                    'height': height + 'px'
-                });
-
-            return svgTag;
-        }
-
-        function getCharText(character, textColor, fontFamily, fontWeight, fontsize) {
-            var textTag = angular.element('<text text-anchor="middle"></text>')
-                .attr({
-                    'y': '50%',
-                    'x': '50%',
-                    'dy': '0.35em',
-                    'pointer-events': 'auto',
-                    'fill': textColor,
-                    'font-family': fontFamily
-                })
-                .text(character)
-                .css({
-                    'font-weight': fontWeight,
-                    'font-size': fontsize + 'px',
-                });
-
-            return textTag;
-        }
-
-        return {
-            restrict: 'AE',
-            replace: true,
-            scope: {
-                data: '@'
-            },
-            link: function (scope, element, attrs) {
-                var params = {
-                    charCount: attrs.charcount || 2,
-                    data: attrs.data,
-                    textColor: attrs.textcolor || '#ffffff',
-                    bgColor: attrs.bgcolor,
-                    height: attrs.avheight || 45,
-                    width: attrs.avwidth || 45,
-                    fontSize: attrs.fontsize || 20,
-                    fontWeight: attrs.fontweight || 300,
-                    fontFamily: attrs.fontfamily || 'Open Sans, HelveticaNeue-Light, Helvetica Neue Light, ' +
-                    'Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif',
-                    round: attrs.round || 'true',
-                    dynamic: attrs.dynamic || 'true',
-                    class: attrs.avclass || '',
-                    border: attrs.avborder || 'false',
-                    borderStyle: attrs.borderstyle || '3px solid white'
-                };
-
-                if (params.dynamic === 'true') {
-                    scope.$watch('data', function () {
-                        generateLetterAvatar();
-                    });
-                }
-                else {
-                    generateLetterAvatar();
-                }
-
-                function generateLetterAvatar() {
-                    var c = null,
-                        upperData = scope.data.toUpperCase();
-
-                    if (params.charCount > 1) {
-                        c = getFirstLetters(upperData, params.charCount);
-                    }
-
-                    if (!c) {
-                        c = upperData.substr(0, params.charCount);
-                    }
-
-                    var cobj = getCharText(c, params.textColor, params.fontFamily, params.fontWeight, params.fontSize);
-                    var color = params.bgColor ? params.bgColor : stringToColor(upperData);
-                    var svg = getSvg(params.width, params.height, color);
-                    svg.append(cobj);
-                    var lvcomponent = angular.element('<div>').append(svg).html();
-
-                    var svgHtml = window.btoa(unescape(encodeURIComponent(lvcomponent)));
-                    var src = 'data:image/svg+xml;base64,' + svgHtml;
-
-                    var img = angular.element('<img>').attr({ src: src, title: scope.data });
-
-                    if (params.round === 'true') {
-                        img.css('border-radius', '50%');
-                    }
-
-                    if (params.border === 'true') {
-                        img.css('border', params.borderStyle);
-                    }
-
-                    if (params.class) {
-                        img.addClass(params.class);
-                    }
-
-                    if (params.dynamic === 'true') {
-                        element.empty();
-                        element.append(img);
-                    }
-                    else {
-                        element.replaceWith(img);
-                    }
-                }
-            }
-        };
-    });

src/app/directives/masterPasswordDirective.js

@@ -1,38 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('masterPassword', function (cryptoService, authService) {
-        return {
-            require: 'ngModel',
-            restrict: 'A',
-            link: function (scope, elem, attr, ngModel) {
-                authService.getUserProfile().then(function (profile) {
-                    // For DOM -> model validation
-                    ngModel.$parsers.unshift(function (value) {
-                        if (!value) {
-                            return undefined;
-                        }
-
-                        return cryptoService.makeKey(value, profile.email).then(function (result) {
-                            var valid = result.keyB64 === cryptoService.getKey().keyB64;
-                            ngModel.$setValidity('masterPassword', valid);
-                            return valid ? value : undefined;
-                        });
-                    });
-
-                    // For model -> DOM validation
-                    ngModel.$formatters.unshift(function (value) {
-                        if (!value) {
-                            return undefined;
-                        }
-
-                        return cryptoService.makeKey(value, profile.email).then(function (result) {
-                            var valid = result.keyB64 === cryptoService.getKey().keyB64;
-                            ngModel.$setValidity('masterPassword', valid);
-                            return value;
-                        });
-                    });
-                });
-            }
-        };
-    });

src/app/directives/pageTitleDirective.js

@@ -1,22 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('pageTitle', function ($rootScope, $timeout, appSettings) {
-        return {
-            link: function (scope, element) {
-                var listener = function (event, toState, toParams, fromState, fromParams) {
-                    // Default title
-                    var title = 'bitwarden Web Vault';
-                    if (toState.data && toState.data.pageTitle) {
-                        title = toState.data.pageTitle + ' - ' + title;
-                    }
-
-                    $timeout(function () {
-                        element.text(title);
-                    });
-                };
-
-                $rootScope.$on('$stateChangeStart', listener);
-            }
-        };
-    });

src/app/directives/passwordMeterDirective.js

@@ -1,73 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('passwordMeter', function () {
-        return {
-            template: '<div class="progress {{outerClass}}"><div class="progress-bar progress-bar-{{valueClass}}" ' +
-                'role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100" ' +
-                'ng-style="{width : ( value + \'%\' ) }"><span class="sr-only">{{value}}%</span></div></div>',
-            restrict: 'A',
-            scope: {
-                password: '=passwordMeter',
-                username: '=passwordMeterUsername',
-                outerClass: '@?'
-            },
-            link: function (scope) {
-                var measureStrength = function (username, password) {
-                    if (!password || password === username) {
-                        return 0;
-                    }
-
-                    var strength = password.length;
-
-                    if (username && username !== '') {
-                        if (username.indexOf(password) !== -1) strength -= 15;
-                        if (password.indexOf(username) !== -1) strength -= username.length;
-                    }
-
-                    if (password.length > 0 && password.length <= 4) strength += password.length;
-                    else if (password.length >= 5 && password.length <= 7) strength += 6;
-                    else if (password.length >= 8 && password.length <= 15) strength += 12;
-                    else if (password.length >= 16) strength += 18;
-
-                    if (password.match(/[a-z]/)) strength += 1;
-                    if (password.match(/[A-Z]/)) strength += 5;
-                    if (password.match(/\d/)) strength += 5;
-                    if (password.match(/.*\d.*\d.*\d/)) strength += 5;
-                    if (password.match(/[!,@,#,$,%,^,&,*,?,_,~]/)) strength += 5;
-                    if (password.match(/.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~]/)) strength += 5;
-                    if (password.match(/(?=.*[a-z])(?=.*[A-Z])/)) strength += 2;
-                    if (password.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/)) strength += 2;
-                    if (password.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!,@,#,$,%,^,&,*,?,_,~])/)) strength += 2;
-
-                    strength = Math.round(strength * 2);
-                    return Math.max(0, Math.min(100, strength));
-                };
-
-                var getClass = function (strength) {
-                    switch (Math.round(strength / 33)) {
-                        case 0:
-                        case 1:
-                            return 'danger';
-                        case 2:
-                            return 'warning';
-                        case 3:
-                            return 'success';
-                    }
-                };
-
-                var updateMeter = function (scope) {
-                    scope.value = measureStrength(scope.username, scope.password);
-                    scope.valueClass = getClass(scope.value);
-                };
-
-                scope.$watch('password', function () {
-                    updateMeter(scope);
-                });
-
-                scope.$watch('username', function () {
-                    updateMeter(scope);
-                });
-            },
-        };
-    });

src/app/directives/passwordViewerDirective.js

@@ -1,27 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('passwordViewer', function () {
-        return {
-            restrict: 'A',
-            link: function (scope, element, attr) {
-                var passwordViewer = attr.passwordViewer;
-                if (!passwordViewer) {
-                    return;
-                }
-
-                element.onclick = function (event) { };
-                element.on('click', function (event) {
-                    var passwordElement = $(passwordViewer);
-                    if (passwordElement && passwordElement.attr('type') === 'password') {
-                        element.removeClass('fa-eye').addClass('fa-eye-slash');
-                        passwordElement.attr('type', 'text');
-                    }
-                    else if (passwordElement && passwordElement.attr('type') === 'text') {
-                        element.removeClass('fa-eye-slash').addClass('fa-eye');
-                        passwordElement.attr('type', 'password');
-                    }
-                });
-            }
-        };
-    });

src/app/directives/stopClickDirective.js

@@ -1,11 +0,0 @@
-angular
-    .module('bit.directives')
-
-    // ref: https://stackoverflow.com/a/14165848/1090359
-    .directive('stopClick', function () {
-        return function (scope, element, attrs) {
-            $(element).click(function (event) {
-                event.preventDefault();
-            });
-        };
-    });

src/app/directives/stopPropDirective.js

@@ -1,10 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('stopProp', function () {
-        return function (scope, element, attrs) {
-            $(element).click(function (event) {
-                event.stopPropagation();
-            });
-        };
-    });

src/app/directives/totpDirective.js

@@ -1,193 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('totp', function ($timeout, $q) {
-        return {
-            template: '<div class="totp{{(low ? \' low\' : \'\')}}" ng-if="code">' +
-            '<span class="totp-countdown"><span class="totp-sec">{{sec}}</span>' +
-            '<svg><g><circle class="totp-circle inner" r="12.6" cy="16" cx="16" style="stroke-dashoffset: {{dash}}px;"></circle>' +
-            '<circle class="totp-circle outer" r="14" cy="16" cx="16"></circle></g></svg></span>' +
-            '<span class="totp-code" id="totp-code">{{codeFormatted}}</span>' +
-            '<a href="#" stop-click class="btn btn-link" ngclipboard ngclipboard-error="clipboardError(e)" ' +
-            'data-clipboard-text="{{code}}" uib-tooltip="Copy Code" tooltip-placement="right">' +
-            '<i class="fa fa-clipboard"></i></a>' +
-            '</div>',
-            restrict: 'A',
-            scope: {
-                key: '=totp'
-            },
-            link: function (scope) {
-                var interval = null;
-
-                var Totp = function () {
-                    var b32Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
-
-                    var leftpad = function (s, l, p) {
-                        if (l + 1 >= s.length) {
-                            s = Array(l + 1 - s.length).join(p) + s;
-                        }
-                        return s;
-                    };
-
-                    var dec2hex = function (d) {
-                        return (d < 15.5 ? '0' : '') + Math.round(d).toString(16);
-                    };
-
-                    var hex2dec = function (s) {
-                        return parseInt(s, 16);
-                    };
-
-                    var hex2bytes = function (s) {
-                        var bytes = new Uint8Array(s.length / 2);
-                        for (var i = 0; i < s.length; i += 2) {
-                            bytes[i / 2] = parseInt(s.substr(i, 2), 16);
-                        }
-                        return bytes;
-                    };
-
-                    var buff2hex = function (buff) {
-                        var bytes = new Uint8Array(buff);
-                        var hex = [];
-                        for (var i = 0; i < bytes.length; i++) {
-                            hex.push((bytes[i] >>> 4).toString(16));
-                            hex.push((bytes[i] & 0xF).toString(16));
-                        }
-                        return hex.join('');
-                    };
-
-                    var b32tohex = function (s) {
-                        s = s.toUpperCase();
-                        var cleanedInput = '';
-                        var i;
-                        for (i = 0; i < s.length; i++) {
-                            if (b32Chars.indexOf(s[i]) < 0) {
-                                continue;
-                            }
-
-                            cleanedInput += s[i];
-                        }
-                        s = cleanedInput;
-
-                        var bits = '';
-                        var hex = '';
-                        for (i = 0; i < s.length; i++) {
-                            var byteIndex = b32Chars.indexOf(s.charAt(i));
-                            if (byteIndex < 0) {
-                                continue;
-                            }
-                            bits += leftpad(byteIndex.toString(2), 5, '0');
-                        }
-                        for (i = 0; i + 4 <= bits.length; i += 4) {
-                            var chunk = bits.substr(i, 4);
-                            hex = hex + parseInt(chunk, 2).toString(16);
-                        }
-                        return hex;
-                    };
-
-                    var b32tobytes = function (s) {
-                        return hex2bytes(b32tohex(s));
-                    };
-
-                    var sign = function (keyBytes, timeBytes) {
-                        return window.crypto.subtle.importKey('raw', keyBytes,
-                            { name: 'HMAC', hash: { name: 'SHA-1' } }, false, ['sign']).then(function (key) {
-                                return window.crypto.subtle.sign({ name: 'HMAC', hash: { name: 'SHA-1' } }, key, timeBytes);
-                            }).then(function (signature) {
-                                return buff2hex(signature);
-                            }).catch(function (err) {
-                                return null;
-                            });
-                    };
-
-                    this.getCode = function (keyb32) {
-                        var epoch = Math.round(new Date().getTime() / 1000.0);
-                        var timeHex = leftpad(dec2hex(Math.floor(epoch / 30)), 16, '0');
-                        var timeBytes = hex2bytes(timeHex);
-                        var keyBytes = b32tobytes(keyb32);
-
-                        if (!keyBytes.length || !timeBytes.length) {
-                            return $q(function (resolve, reject) {
-                                resolve(null);
-                            });
-                        }
-
-                        return sign(keyBytes, timeBytes).then(function (hashHex) {
-                            if (!hashHex) {
-                                return null;
-                            }
-
-                            var offset = hex2dec(hashHex.substring(hashHex.length - 1));
-                            var otp = (hex2dec(hashHex.substr(offset * 2, 8)) & hex2dec('7fffffff')) + '';
-                            otp = (otp).substr(otp.length - 6, 6);
-                            return otp;
-                        });
-                    };
-                };
-
-                var totp = new Totp();
-
-                var updateCode = function (scope) {
-                    totp.getCode(scope.key).then(function (code) {
-                        $timeout(function () {
-                            if (code) {
-                                scope.codeFormatted = code.substring(0, 3) + ' ' + code.substring(3);
-                                scope.code = code;
-                            }
-                            else {
-                                scope.code = null;
-                                if (interval) {
-                                    clearInterval(interval);
-                                }
-                            }
-                        });
-                    });
-                };
-
-                var tick = function (scope) {
-                    $timeout(function () {
-                        var epoch = Math.round(new Date().getTime() / 1000.0);
-                        var mod = epoch % 30;
-                        var sec = 30 - mod;
-
-                        scope.sec = sec;
-                        scope.dash = (2.62 * mod).toFixed(2);
-                        scope.low = sec <= 7;
-                        if (mod === 0) {
-                            updateCode(scope);
-                        }
-                    });
-                };
-
-                scope.$watch('key', function () {
-                    if (!scope.key) {
-                        scope.code = null;
-                        if (interval) {
-                            clearInterval(interval);
-                        }
-                        return;
-                    }
-
-                    updateCode(scope);
-                    tick(scope);
-
-                    if (interval) {
-                        clearInterval(interval);
-                    }
-
-                    interval = setInterval(function () {
-                        tick(scope);
-                    }, 1000);
-                });
-
-                scope.$on('$destroy', function () {
-                    if (interval) {
-                        clearInterval(interval);
-                    }
-                });
-
-                scope.clipboardError = function (e) {
-                    alert('Your web browser does not support easy clipboard copying.');
-                };
-            },
-        };
-    });

src/app/dummy.module.ts

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

src/app/filters/enumLabelClassFilter.js

@@ -1,32 +0,0 @@
-angular
-    .module('bit.filters')
-
-    .filter('enumLabelClass', function () {
-        return function (input, name) {
-            if (typeof input !== 'number') {
-                return input.toString();
-            }
-
-            var output;
-            switch (name) {
-                case 'OrgUserStatus':
-                    switch (input) {
-                        case 0:
-                            output = 'label-default';
-                            break;
-                        case 1:
-                            output = 'label-warning';
-                            break;
-                        case 2:
-                        /* falls through */
-                        default:
-                            output = 'label-success';
-                    }
-                    break;
-                default:
-                    output = 'label-default';
-            }
-
-            return output;
-        };
-    });

src/app/filters/enumNameFilter.js

@@ -1,46 +0,0 @@
-angular
-    .module('bit.filters')
-
-    .filter('enumName', function () {
-        return function (input, name) {
-            if (typeof input !== 'number') {
-                return input.toString();
-            }
-
-            var output;
-            switch (name) {
-                case 'OrgUserStatus':
-                    switch (input) {
-                        case 0:
-                            output = 'Invited';
-                            break;
-                        case 1:
-                            output = 'Accepted';
-                            break;
-                        case 2:
-                        /* falls through */
-                        default:
-                            output = 'Confirmed';
-                    }
-                    break;
-                case 'OrgUserType':
-                    switch (input) {
-                        case 0:
-                            output = 'Owner';
-                            break;
-                        case 1:
-                            output = 'Admin';
-                            break;
-                        case 2:
-                        /* falls through */
-                        default:
-                            output = 'User';
-                    }
-                    break;
-                default:
-                    output = input.toString();
-            }
-
-            return output;
-        };
-    });

src/app/filters/filtersModule.js

@@ -1,2 +0,0 @@
-angular
-    .module('bit.filters', []);

src/app/global/appsController.js

@@ -1,6 +0,0 @@
-angular
-    .module('bit.global')
-
-    .controller('appsController', function ($scope, $state) {
-
-    });

src/app/global/globalModule.js

@@ -1,2 +0,0 @@
-angular
-    .module('bit.global', []);