version bump

README.md

@@ -13,8 +13,9 @@ The bitwarden Web project is an AngularJS application that powers the web vault
 - Node.js
 - Gulp
 
-Unless you are running the [Core](https://github.com/bitwarden/core) API locally, you'll probably need to switch the 
-application to target the production API. Open `package.json` and set `production` to `true`.
+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`.
 
 Then run the following commands:
 

gulpfile.js

@@ -69,7 +69,9 @@ gulp.task('min:js', ['clean:js'], function () {
         [
             paths.js,
             '!' + paths.minJs,
-            '!' + paths.webroot + 'js/fallback*.js'
+            '!' + paths.jsDir + 'fallback*.js',
+            '!' + paths.jsDir + 'u2f-connector.js',
+            '!' + paths.jsDir + 'duo.js'
         ], { base: '.' })
         .pipe(concat(paths.concatJsDest))
         .pipe(uglify())
@@ -177,6 +179,18 @@ gulp.task('lib', ['clean:lib'], function () {
                 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'
         }
     ];
 
@@ -310,8 +324,16 @@ gulp.task('dist:move', function () {
             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.webroot + 'js/bw.min.js',
+            src: paths.jsDir + 'duo.js',
+            dest: paths.dist + 'js'
+        },
+        {
+            src: paths.jsDir + 'bw.min.js',
             dest: paths.dist + 'js'
         },
         {
@@ -319,7 +341,10 @@ gulp.task('dist:move', function () {
                 paths.webroot + '**/app/**/*.html',
                 paths.webroot + '**/images/**/*',
                 paths.webroot + 'index.html',
-                paths.webroot + 'favicon.ico'
+                paths.webroot + 'u2f-connector.html',
+                paths.webroot + 'duo-connector.html',
+                paths.webroot + 'favicon.ico',
+                paths.webroot + 'app-id.json'
             ],
             dest: paths.dist
         }
@@ -364,16 +389,28 @@ gulp.task('dist:js:app', function () {
 gulp.task('dist:js:fallback', function () {
     var mainStream = gulp
         .src([
-            paths.webroot + 'js/fallback*.js'
+            paths.jsDir + 'fallback*.js'
         ]);
 
-    merge(mainStream, config())
+    merge(mainStream)
         .pipe(preprocess({ context: { cacheTag: randomString } }))
         .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([
@@ -401,7 +438,7 @@ gulp.task('dist:preprocess', function () {
 gulp.task('dist', ['build'], function (cb) {
     return runSequence(
         'dist:clean',
-        ['dist:move', 'dist:css', 'dist:js:app', 'dist:js:lib', 'dist:js:fallback'],
+        ['dist:move', 'dist:css', 'dist:js:app', 'dist:js:lib', 'dist:js:fallback', 'dist:js:u2f'],
         'dist:preprocess',
         cb);
 });
@@ -415,13 +452,22 @@ gulp.task('deploy-preview', ['dist'], function () {
     return gulp.src(paths.dist + '**/*')
         .pipe(ghPages({
             cacheDir: paths.dist + '.publish',
-            remoteUrl: 'git@github.com:bitwarden/web-preview.git'
+            remoteUrl: 'git@github.com:kspearrin/bitwarden-web-preview.git'
         }));
 });
 
 gulp.task('serve', function () {
     connect.server({
         port: 4001,
-        root: ['src']
+        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();
+            }];
+        }
     });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitwarden",
-  "version": "1.13.0",
+  "version": "1.14.2",
   "env": "Production",
   "devDependencies": {
     "connect": "3.6.0",
@@ -48,6 +48,8 @@
     "browserify": "14.1.0",
     "vinyl-source-stream": "1.1.0",
     "gulp-derequire": "2.1.0",
-    "exposify": "0.5.0"
+    "exposify": "0.5.0",
+    "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
+    "angular-promise-polyfill": "0.0.4"
   }
 }

settings.Preview.json

@@ -2,6 +2,7 @@
   "appSettings": {
     "apiUri": "https://preview-api.bitwarden.com",
     "identityUri": "https://preview-identity.bitwarden.com",
-    "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD"
+    "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD",
+    "braintreeKey": "sandbox_r72q8jq6_9pnxkwm75f87sdc2"
   }
 }

settings.Production.json

@@ -2,6 +2,7 @@
   "appSettings": {
     "apiUri": "https://api.bitwarden.com",
     "identityUri": "https://identity.bitwarden.com",
-    "stripeKey": "pk_live_bpN0P37nMxrMQkcaHXtAybJk"
+    "stripeKey": "pk_live_bpN0P37nMxrMQkcaHXtAybJk",
+    "braintreeKey": "TODO"
   }
 }

settings.json

@@ -2,6 +2,7 @@
   "appSettings": {
     "apiUri": "http://localhost:4000",
     "identityUri": "http://localhost:33656",
-    "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD"
+    "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD",
+    "braintreeKey": "sandbox_r72q8jq6_9pnxkwm75f87sdc2"
   }
 }

src/app-id.json

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

src/app/accounts/accountsLoginController.js

@@ -2,35 +2,55 @@ angular
     .module('bit.accounts')
 
     .controller('accountsLoginController', function ($scope, $rootScope, $cookies, apiService, cryptoService, authService,
-        $state, constants, $analytics) {
+        $state, constants, $analytics, $uibModal, $timeout, $window, $filter, toastr) {
         $scope.state = $state;
+        $scope.twoFactorProviderConstants = constants.twoFactorProvider;
+        $scope.rememberTwoFactor = { checked: false };
+        var stopU2fCheck = true;
 
-        var returnState;
-        if (!$state.params.returnState && $state.params.org) {
-            returnState = {
+        $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 {
-            returnState = $state.params.returnState;
-        }
-
-        var rememberedEmail = $cookies.get(constants.rememberedEmailCookieName);
-        if (rememberedEmail || $state.params.email) {
-            $scope.model = {
-                email: $state.params.email ? $state.params.email : rememberedEmail,
-                rememberEmail: rememberedEmail !== null
+        else if (!$scope.returnState && $state.params.premium) {
+            $scope.returnState = {
+                name: 'backend.user.settingsPremium'
             };
         }
 
-        var email,
-            masterPassword;
+        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);
-
-            $scope.loginPromise.then(function (twoFactorProviders) {
+            $scope.loginPromise = authService.logIn(model.email, model.masterPassword).then(function (twoFactorProviders) {
                 if (model.rememberEmail) {
                     var cookieExpiration = new Date();
                     cookieExpiration.setFullYear(cookieExpiration.getFullYear() + 10);
@@ -44,36 +64,215 @@ angular
                     $cookies.remove(constants.rememberedEmailCookieName);
                 }
 
-                if (twoFactorProviders && twoFactorProviders.length > 0) {
-                    email = model.email;
-                    masterPassword = model.masterPassword;
+                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: returnState });
+                    $state.go('frontend.login.twoFactor', { returnState: $scope.returnState }).then(function () {
+                        $timeout(function () {
+                            $("#code").focus();
+                            init();
+                        });
+                    });
                 }
                 else {
                     $analytics.eventTrack('Logged In');
                     loggedInGo();
                 }
+
+                model.masterPassword = '';
             });
         };
 
-        $scope.twoFactor = function (model) {
-            // Only supporting Authenticator (0) provider for now
-            $scope.twoFactorPromise = authService.logIn(email, masterPassword, model.code, 0);
+        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);
+            var cleanedProviders = [];
+            for (var i = 0; i < keys.length; i++) {
+                var provider = $filter('filter')(constants.twoFactorProviderInfo, {
+                    type: keys[i],
+                    active: true,
+                    requiresUsb: false
+                });
+                if (provider.length) {
+                    cleanedProviders.push(twoFactorProviders[keys[i]]);
+                }
+            }
+            return cleanedProviders;
+        }
+
+        // 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 (returnState) {
-                $state.go(returnState.name, returnState.params);
+            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/accountsOrganizationAcceptController.js

@@ -42,8 +42,4 @@ angular
                 $scope.loading = false;
             }
         });
-
-        $scope.submit = function (model) {
-
-        };
     });

src/app/accounts/accountsRecoverController.js

@@ -6,17 +6,16 @@ angular
 
         $scope.submit = function (model) {
             var email = model.email.toLowerCase();
-            var key = cryptoService.makeKey(model.masterPassword, email);
 
-            var request = {
-                email: email,
-                masterPasswordHash: cryptoService.hashPassword(model.masterPassword, key),
-                recoveryCode: model.code.replace(/\s/g, '').toLowerCase()
-            };
-
-            $scope.submitPromise = apiService.accounts.postTwoFactorRecover(request, function () {
+            $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;
-            }).$promise;
+            });
         };
     });

src/app/accounts/accountsRegisterController.js

@@ -2,7 +2,7 @@ angular
     .module('bit.accounts')
 
     .controller('accountsRegisterController', function ($scope, $location, apiService, cryptoService, validationService,
-        $analytics, $state) {
+        $analytics, $state, $timeout) {
         var params = $location.search();
         var stateParams = $state.params;
         $scope.createOrg = stateParams.org;
@@ -13,6 +13,12 @@ angular
                 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;
         }
@@ -23,6 +29,16 @@ angular
         };
         $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;
@@ -41,14 +57,17 @@ angular
             }
 
             var email = $scope.model.email.toLowerCase();
-            var key = cryptoService.makeKey($scope.model.masterPassword, email);
-            var encKey = cryptoService.makeEncKey(key);
+            var makeResult, encKey;
 
-            $scope.registerPromise = cryptoService.makeKeyPair(encKey.encKey).then(function (result) {
+            $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: cryptoService.hashPassword($scope.model.masterPassword, key),
+                    masterPasswordHash: makeResult.hash,
                     masterPasswordHint: $scope.model.masterPasswordHint,
                     key: encKey.encKeyEnc,
                     keys: {

src/app/accounts/accountsTwoFactorMethodsController.js

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

@@ -0,0 +1,28 @@
+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/views/accountsLoginInfo.html

@@ -36,7 +36,7 @@
     <hr />
     <ul>
         <li>
-            <a ui-sref="frontend.register({returnState: state.params.returnState, email: state.params.email})">
+            <a ui-sref="frontend.register({returnState: returnState, email: stateEmail})">
                 Create a new account
             </a>
         </li>

src/app/accounts/views/accountsLoginTwoFactor.html

@@ -1,25 +1,163 @@
-<p class="login-box-msg">Enter your two-step verification code.</p>
-<form name="twoFactorForm" ng-submit="twoFactorForm.$valid && twoFactor(model)" 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 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>
-    <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="model.code"
-               required api-field />
-        <span class="fa fa-lock form-control-feedback"></span>
-    </div>
-    <div class="row">
-        <div class="col-xs-7">
-            <a ui-sref="frontend.recover">Lost authenticator app?</a>
+    <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="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 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 />
+            <span class="fa fa-lock form-control-feedback"></span>
         </div>
-    </div>
-</form>
+        <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">
+        <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">
+        <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">
+        <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/accountsRecover.html

@@ -4,10 +4,9 @@
     </div>
     <div class="login-box-body">
         <p class="login-box-msg">
-            Lost your authenticator app?
-            <a href="https://help.bitwarden.com/article/lost-two-step-device/" target="_blank">
-                Help me!
-            </a>
+            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">

src/app/accounts/views/accountsTwoFactorMethods.html

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

@@ -0,0 +1,8 @@
+<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/app.js

@@ -9,6 +9,7 @@
         'angulartics.google.analytics',
         'angular-stripe',
         'credit-cards',
+        'angular-promise-polyfill',
 
         'bit.directives',
         'bit.filters',

src/app/config.js

@@ -7,7 +7,7 @@ angular
         $locationProvider.hashPrefix('');
         jwtOptionsProvider.config({
             urlParam: 'access_token3',
-            whiteListedDomains: ['api.bitwarden.com', 'preview-api.bitwarden.com', 'localhost', '192.168.1.6']
+            whiteListedDomains: ['api.bitwarden.com', 'preview-api.bitwarden.com', 'localhost', '192.168.1.3']
         });
         var refreshPromise;
         jwtInterceptorProvider.tokenGetter = /*@ngInject*/ function (options, tokenService, authService) {
@@ -55,6 +55,15 @@ angular
 
         $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');
 
@@ -103,12 +112,30 @@ angular
                 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',
@@ -187,25 +214,26 @@ angular
                 controller: 'accountsLoginController',
                 params: {
                     returnState: null,
-                    email: null
+                    email: null,
+                    premium: null,
+                    org: null
                 },
                 data: {
                     bodyClass: 'login-page'
                 }
             })
             .state('frontend.login.info', {
-                url: '^/?org',
+                url: '^/?org&premium&email',
                 templateUrl: 'app/accounts/views/accountsLoginInfo.html',
                 data: {
                     pageTitle: 'Log In'
                 }
             })
             .state('frontend.login.twoFactor', {
-                url: '^/two-factor',
+                url: '^/two-step?org&premium&email',
                 templateUrl: 'app/accounts/views/accountsLoginTwoFactor.html',
                 data: {
-                    pageTitle: 'Log In (Two Factor)',
-                    authorizeTwoFactor: true
+                    pageTitle: 'Log In (Two-step)'
                 }
             })
             .state('frontend.logout', {
@@ -234,12 +262,14 @@ angular
                 }
             })
             .state('frontend.register', {
-                url: '^/register?org',
+                url: '^/register?org&premium',
                 templateUrl: 'app/accounts/views/accountsRegister.html',
                 controller: 'accountsRegisterController',
                 params: {
                     returnState: null,
-                    email: null
+                    email: null,
+                    org: null,
+                    premium: null
                 },
                 data: {
                     pageTitle: 'Register',
@@ -255,6 +285,16 @@ angular
                     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) {

src/app/constants.js

@@ -6,7 +6,9 @@ angular.module('bit')
             AesCbc128_HmacSha256_B64: 1,
             AesCbc256_HmacSha256_B64: 2,
             Rsa2048_OaepSha256_B64: 3,
-            Rsa2048_OaepSha1_B64: 4
+            Rsa2048_OaepSha1_B64: 4,
+            Rsa2048_OaepSha256_HmacSha256_B64: 5,
+            Rsa2048_OaepSha1_HmacSha256_B64: 6
         },
         orgUserType: {
             owner: 0,
@@ -18,6 +20,74 @@ angular.module('bit')
             accepted: 1,
             confirmed: 2
         },
+        twoFactorProvider: {
+            u2f: 4,
+            yubikey: 3,
+            duo: 2,
+            authenticator: 0,
+            email: 1,
+            remember: 5
+        },
+        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,
@@ -55,5 +125,14 @@ angular.module('bit')
                 annualPlanType: 'enterpriseAnnually',
                 upgradeSortOrder: 3
             }
+        },
+        storageGb: {
+            price: 0.33,
+            monthlyPrice: 0.50,
+            yearlyPrice: 4
+        },
+        premium: {
+            price: 10,
+            yearlyPrice: 10
         }
     });

src/app/directives/apiFormDirective.js

@@ -1,7 +1,7 @@
 angular
     .module('bit.directives')
 
-    .directive('apiForm', function ($rootScope, validationService) {
+    .directive('apiForm', function ($rootScope, validationService, $timeout) {
         return {
             require: 'form',
             restrict: 'A',
@@ -25,12 +25,21 @@ angular
             form.$loading = true;
 
             promise.then(function success(response) {
-                form.$loading = false;
+                $timeout(function () {
+                    form.$loading = false;
+                });
             }, function failure(reason) {
-                form.$loading = false;
-                validationService.addErrors(form, reason);
-                scope.$broadcast('show-errors-check-validity');
-                $('html, body').animate({ scrollTop: 0 }, 200);
+                $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/masterPasswordDirective.js

@@ -13,10 +13,11 @@ angular
                             return undefined;
                         }
 
-                        var key = cryptoService.makeKey(value, profile.email);
-                        var valid = key.keyB64 === cryptoService.getKey().keyB64;
-                        ngModel.$setValidity('masterPassword', valid);
-                        return valid ? value : 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
@@ -25,11 +26,11 @@ angular
                             return undefined;
                         }
 
-                        var key = cryptoService.makeKey(value, profile.email);
-                        var valid = key.keyB64 === cryptoService.getKey().keyB64;
-
-                        ngModel.$setValidity('masterPassword', valid);
-                        return value;
+                        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/totpDirective.js

@@ -0,0 +1,193 @@
+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/global/mainController.js

@@ -1,12 +1,15 @@
 angular
     .module('bit.global')
 
-    .controller('mainController', function ($scope, $state, authService, appSettings, toastr, $window, $document) {
+    .controller('mainController', function ($scope, $state, authService, appSettings, toastr, $window, $document,
+        cryptoService, $uibModal, apiService) {
         var vm = this;
         vm.bodyClass = '';
         vm.usingControlSidebar = vm.openControlSidebar = false;
         vm.searchVaultText = null;
         vm.version = appSettings.version;
+        vm.outdatedBrowser = $window.navigator.userAgent.indexOf('MSIE') !== -1 ||
+            $window.navigator.userAgent.indexOf('SamsungBrowser') !== -1;
 
         $scope.currentYear = new Date().getFullYear();
 
@@ -30,6 +33,7 @@ angular
         });
 
         $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
+            vm.usingEncKey = !!cryptoService.getEncKey();
             vm.searchVaultText = null;
 
             if (toState.data.bodyClass) {
@@ -68,6 +72,34 @@ angular
             $scope.$broadcast('organizationGroupsAdd');
         };
 
+        $scope.updateKey = function () {
+            $uibModal.open({
+                animation: true,
+                templateUrl: 'app/settings/views/settingsUpdateKey.html',
+                controller: 'settingsUpdateKeyController'
+            });
+        };
+
+        $scope.verifyEmail = function () {
+            if ($scope.sendingVerify) {
+                return;
+            }
+
+            $scope.sendingVerify = true;
+            apiService.accounts.verifyEmail({}, null).$promise.then(function () {
+                toastr.success('Verification email sent.');
+                $scope.sendingVerify = false;
+                $scope.verifyEmailSent = true;
+            }).catch(function () {
+                toastr.success('Verification email failed.');
+                $scope.sendingVerify = false;
+            });
+        };
+
+        $scope.updateBrowser = function () {
+            $window.open('https://browser-update.org/update.html', '_blank');
+        };
+
         // Append dropdown menu somewhere else
         var bodyScrollbarWidth,
             appendedDropdownMenu,
@@ -109,7 +141,7 @@ angular
             var offset = target.offset();
             var css = {
                 display: 'block',
-                top: offset.top + target.outerHeight()
+                top: offset.top + target.outerHeight() - (appendTo !== 'body' ? $(window).scrollTop() : 0)
             };
 
             if (appendedDropdownMenu.hasClass('dropdown-menu-right')) {

src/app/global/paidOrgRequiredController.js

@@ -0,0 +1,26 @@
+angular
+    .module('bit.global')
+
+    .controller('paidOrgRequiredController', function ($scope, $state, $uibModalInstance, $analytics, $uibModalStack, orgId,
+        constants, authService) {
+        $analytics.eventTrack('paidOrgRequiredController', { category: 'Modal' });
+
+        authService.getUserProfile().then(function (profile) {
+            $scope.admin = profile.organizations[orgId].type !== constants.orgUserType.user;
+        });
+
+        $scope.go = function () {
+            if (!$scope.admin) {
+                return;
+            }
+
+            $analytics.eventTrack('Get Paid Org');
+            $state.go('backend.org.billing', { orgId: orgId }).then(function () {
+                $uibModalStack.dismissAll();
+            });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('close');
+        };
+    });

src/app/global/premiumRequiredController.js

@@ -0,0 +1,17 @@
+angular
+    .module('bit.global')
+
+    .controller('premiumRequiredController', function ($scope, $state, $uibModalInstance, $analytics, $uibModalStack) {
+        $analytics.eventTrack('premiumRequiredController', { category: 'Modal' });
+
+        $scope.go = function () {
+            $analytics.eventTrack('Get Premium');
+            $state.go('backend.user.settingsPremium').then(function () {
+                $uibModalStack.dismissAll();
+            });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('close');
+        };
+    });

src/app/global/sideNavController.js

@@ -1,7 +1,7 @@
 angular
     .module('bit.global')
 
-    .controller('sideNavController', function ($scope, $state, authService, toastr, $analytics) {
+    .controller('sideNavController', function ($scope, $state, authService, toastr, $analytics, constants) {
         $scope.$state = $state;
         $scope.params = $state.params;
         $scope.orgs = [];
@@ -31,7 +31,7 @@ angular
         });
 
         $scope.viewOrganization = function (org) {
-            if (org.type === 2) { // 2 = User
+            if (org.type === constants.orgUserType.user) {
                 toastr.error('You cannot manage this organization.');
                 return;
             }
@@ -49,6 +49,6 @@ angular
         };
 
         $scope.isOrgOwner = function (org) {
-            return org && org.type === 0;
+            return org && org.type === constants.orgUserType.owner;
         };
     });

src/app/organization/organizationBillingAdjustStorageController.js

@@ -0,0 +1,37 @@
+angular
+    .module('bit.organization')
+
+    .controller('organizationBillingAdjustStorageController', function ($scope, $state, $uibModalInstance, apiService,
+        $analytics, toastr, add) {
+        $analytics.eventTrack('organizationBillingAdjustStorageController', { category: 'Modal' });
+        $scope.add = add;
+        $scope.storageAdjustment = 0;
+
+        $scope.submit = function () {
+            var request = {
+                storageGbAdjustment: $scope.storageAdjustment
+            };
+
+            if (!add) {
+                request.storageGbAdjustment *= -1;
+            }
+
+            $scope.submitPromise = apiService.organizations.putStorage({ id: $state.params.orgId }, request)
+                .$promise.then(function (response) {
+                    if (add) {
+                        $analytics.eventTrack('Added Organization Storage');
+                        toastr.success('You have added ' + $scope.storageAdjustment + ' GB.');
+                    }
+                    else {
+                        $analytics.eventTrack('Removed Organization Storage');
+                        toastr.success('You have removed ' + $scope.storageAdjustment + ' GB.');
+                    }
+
+                    $uibModalInstance.close();
+                });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/organization/organizationBillingChangePaymentController.js

@@ -5,6 +5,9 @@
         $analytics, toastr, existingPaymentMethod) {
         $analytics.eventTrack('organizationBillingChangePaymentController', { category: 'Modal' });
         $scope.existingPaymentMethod = existingPaymentMethod;
+        $scope.paymentMethod = 'card';
+        $scope.showPaymentOptions = false;
+        $scope.card = {};
 
         $scope.submit = function () {
             $scope.submitPromise = stripe.card.createToken($scope.card).then(function (response) {
@@ -13,14 +16,16 @@
                 };
 
                 return apiService.organizations.putPayment({ id: $state.params.orgId }, request).$promise;
+            }, function (err) {
+                throw err.message;
             }).then(function (response) {
                 $scope.card = null;
                 if (existingPaymentMethod) {
-                    $analytics.eventTrack('Changed Payment Method');
+                    $analytics.eventTrack('Changed Organization Payment Method');
                     toastr.success('You have changed your payment method.');
                 }
                 else {
-                    $analytics.eventTrack('Added Payment Method');
+                    $analytics.eventTrack('Added Organization Payment Method');
                     toastr.success('You have added a payment method.');
                 }
 

src/app/organization/organizationBillingController.js

@@ -15,7 +15,7 @@
         $scope.changePayment = function () {
             var modal = $uibModal.open({
                 animation: true,
-                templateUrl: 'app/organization/views/organizationBillingChangePayment.html',
+                templateUrl: 'app/settings/views/settingsBillingChangePayment.html',
                 controller: 'organizationBillingChangePaymentController',
                 resolve: {
                     existingPaymentMethod: function () {
@@ -63,6 +63,23 @@
             });
         };
 
+        $scope.adjustStorage = function (add) {
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/settings/views/settingsBillingAdjustStorage.html',
+                controller: 'organizationBillingAdjustStorageController',
+                resolve: {
+                    add: function () {
+                        return add;
+                    }
+                }
+            });
+
+            modal.result.then(function () {
+                load();
+            });
+        };
+
         $scope.cancel = function () {
             if (!confirm('Are you sure you want to cancel? All users will lose access to the organization ' +
                 'at the end of this billing cycle.')) {
@@ -103,14 +120,25 @@
                     seats: org.Seats
                 };
 
+                $scope.storage = null;
+                if ($scope && org.MaxStorageGb) {
+                    $scope.storage = {
+                        currentGb: org.StorageGb || 0,
+                        maxGb: org.MaxStorageGb,
+                        currentName: org.StorageName || '0 GB'
+                    };
+
+                    $scope.storage.percentage = +(100 * ($scope.storage.currentGb / $scope.storage.maxGb)).toFixed(2);
+                }
+
                 $scope.subscription = null;
                 if (org.Subscription) {
                     $scope.subscription = {
                         trialEndDate: org.Subscription.TrialEndDate,
                         cancelledDate: org.Subscription.CancelledDate,
                         status: org.Subscription.Status,
-                        cancelled: org.Subscription.Status === 'cancelled',
-                        markedForCancel: org.Subscription.Status === 'active' && org.Subscription.CancelledDate
+                        cancelled: org.Subscription.Cancelled,
+                        markedForCancel: !org.Subscription.Cancelled && org.Subscription.CancelAtEndDate
                     };
                 }
 

src/app/organization/organizationDeleteController.js

@@ -5,19 +5,18 @@
         authService, toastr, $analytics) {
         $analytics.eventTrack('organizationDeleteController', { category: 'Modal' });
         $scope.submit = function () {
-            var request = {
-                masterPasswordHash: cryptoService.hashPassword($scope.masterPassword)
-            };
-
-            $scope.submitPromise = apiService.organizations.del({ id: $state.params.orgId }, request, function () {
+            $scope.submitPromise = cryptoService.hashPassword($scope.masterPassword).then(function (hash) {
+                return apiService.organizations.del({ id: $state.params.orgId }, {
+                    masterPasswordHash: hash
+                }).$promise;
+            }).then(function () {
                 $uibModalInstance.dismiss('cancel');
                 authService.removeProfileOrganization($state.params.orgId);
                 $analytics.eventTrack('Deleted Organization');
-                $state.go('backend.user.vault').then(function () {
-                    toastr.success('This organization and all associated data has been deleted.',
-                        'Organization Deleted');
-                });
-            }).$promise;
+                return $state.go('backend.user.vault');
+            }).then(function () {
+                toastr.success('This organization and all associated data has been deleted.', 'Organization Deleted');
+            });
         };
 
         $scope.close = function () {

src/app/organization/organizationVaultAddLoginController.js

@@ -1,11 +1,16 @@
 angular
-    .module('bit.vault')
+    .module('bit.organization')
 
     .controller('organizationVaultAddLoginController', function ($scope, apiService, $uibModalInstance, cryptoService,
-        cipherService, passwordService, $analytics, orgId) {
+        cipherService, passwordService, $analytics, authService, orgId, $uibModal) {
         $analytics.eventTrack('organizationVaultAddLoginController', { category: 'Modal' });
         $scope.login = {};
-        $scope.hideFolders = $scope.hideFavorite = true;
+        $scope.hideFolders = $scope.hideFavorite = $scope.fromOrg = true;
+
+        authService.getUserProfile().then(function (userProfile) {
+            var orgProfile = userProfile.organizations[orgId];
+            $scope.useTotp = orgProfile.useTotp;
+        });
 
         $scope.savePromise = null;
         $scope.save = function (model) {
@@ -47,4 +52,15 @@
         $scope.close = function () {
             $uibModalInstance.dismiss('close');
         };
+
+        $scope.showUpgrade = function () {
+            $uibModal.open({
+                animation: true,
+                templateUrl: 'app/views/paidOrgRequired.html',
+                controller: 'paidOrgRequiredController',
+                resolve: {
+                    orgId: function () { return orgId; }
+                }
+            });
+        };
     });

src/app/organization/organizationVaultAttachmentsController.js

@@ -0,0 +1,94 @@
+angular
+    .module('bit.organization')
+
+    .controller('organizationVaultAttachmentsController', function ($scope, apiService, $uibModalInstance, cryptoService,
+        cipherService, loginId, $analytics, validationService, toastr, $timeout) {
+        $analytics.eventTrack('organizationVaultAttachmentsController', { category: 'Modal' });
+        $scope.login = {};
+        $scope.loading = true;
+        $scope.isPremium = true;
+        $scope.canUseAttachments = true;
+        var closing = false;
+
+        apiService.logins.getAdmin({ id: loginId }, function (login) {
+            $scope.login = cipherService.decryptLogin(login);
+            $scope.loading = false;
+        }, function () {
+            $scope.loading = false;
+        });
+
+        $scope.save = function (form) {
+            var files = document.getElementById('file').files;
+            if (!files || !files.length) {
+                validationService.addError(form, 'file', 'Select a file.', true);
+                return;
+            }
+
+            var key = cryptoService.getOrgKey($scope.login.organizationId);
+            $scope.savePromise = cipherService.encryptAttachmentFile(key, files[0]).then(function (encValue) {
+                var fd = new FormData();
+                var blob = new Blob([encValue.data], { type: 'application/octet-stream' });
+                fd.append('data', blob, encValue.fileName);
+                return apiService.ciphers.postAttachment({ id: loginId }, fd).$promise;
+            }).then(function (response) {
+                $analytics.eventTrack('Added Attachment');
+                toastr.success('The attachment has been added.');
+                closing = true;
+                $uibModalInstance.close(true);
+            }, function (err) {
+                if (err) {
+                    validationService.addError(form, 'file', err, true);
+                }
+                else {
+                    validationService.addError(form, 'file', 'Something went wrong.', true);
+                }
+            });
+        };
+
+        $scope.download = function (attachment) {
+            attachment.loading = true;
+            var key = cryptoService.getOrgKey($scope.login.organizationId);
+            cipherService.downloadAndDecryptAttachment(key, attachment, true).then(function (res) {
+                $timeout(function () {
+                    attachment.loading = false;
+                });
+            }, function () {
+                $timeout(function () {
+                    attachment.loading = false;
+                });
+            });
+        };
+
+        $scope.remove = function (attachment) {
+            if (!confirm('Are you sure you want to delete this attachment (' + attachment.fileName + ')?')) {
+                return;
+            }
+
+            attachment.loading = true;
+            apiService.ciphers.delAttachment({ id: loginId, attachmentId: attachment.id }).$promise.then(function () {
+                attachment.loading = false;
+                $analytics.eventTrack('Deleted Organization Attachment');
+                var index = $scope.login.attachments.indexOf(attachment);
+                if (index > -1) {
+                    $scope.login.attachments.splice(index, 1);
+                }
+            }, function () {
+                toastr.error('Cannot delete attachment.');
+                attachment.loading = false;
+            });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+
+        $scope.$on('modal.closing', function (e, reason, closed) {
+            if (closing) {
+                return;
+            }
+
+            e.preventDefault();
+            closing = true;
+            $uibModalInstance.close(!!$scope.login.attachments && $scope.login.attachments.length > 0);
+        });
+    });

src/app/organization/organizationVaultController.js

@@ -2,7 +2,7 @@
     .module('bit.organization')
 
     .controller('organizationVaultController', function ($scope, apiService, cipherService, $analytics, $q, $state,
-        $localStorage, $uibModal, $filter) {
+        $localStorage, $uibModal, $filter, authService) {
         $scope.logins = [];
         $scope.collections = [];
         $scope.loading = true;
@@ -83,7 +83,8 @@
                 templateUrl: 'app/vault/views/vaultEditLogin.html',
                 controller: 'organizationVaultEditLoginController',
                 resolve: {
-                    loginId: function () { return login.id; }
+                    loginId: function () { return login.id; },
+                    orgId: function () { return $state.params.orgId; }
                 }
             });
 
@@ -138,6 +139,37 @@
             });
         };
 
+        $scope.attachments = function (login) {
+            authService.getUserProfile().then(function (profile) {
+                return !!profile.organizations[login.organizationId].maxStorageGb;
+            }).then(function (useStorage) {
+                if (!useStorage) {
+                    $uibModal.open({
+                        animation: true,
+                        templateUrl: 'app/views/paidOrgRequired.html',
+                        controller: 'paidOrgRequiredController',
+                        resolve: {
+                            orgId: function () { return login.organizationId; }
+                        }
+                    });
+                    return;
+                }
+
+                var attachmentModel = $uibModal.open({
+                    animation: true,
+                    templateUrl: 'app/vault/views/vaultAttachments.html',
+                    controller: 'organizationVaultAttachmentsController',
+                    resolve: {
+                        loginId: function () { return login.id; }
+                    }
+                });
+
+                attachmentModel.result.then(function (hasAttachments) {
+                    login.hasAttachments = hasAttachments;
+                });
+            });
+        };
+
         $scope.removeLogin = function (login, collection) {
             if (!confirm('Are you sure you want to remove this login (' + login.name + ') from the ' +
                 'collection (' + collection.name + ') ?')) {

src/app/organization/organizationVaultEditLoginController.js

@@ -1,14 +1,15 @@
 angular
-    .module('bit.vault')
+    .module('bit.organization')
 
     .controller('organizationVaultEditLoginController', function ($scope, apiService, $uibModalInstance, cryptoService,
-        cipherService, passwordService, loginId, $analytics) {
+        cipherService, passwordService, loginId, $analytics, orgId, $uibModal) {
         $analytics.eventTrack('organizationVaultEditLoginController', { category: 'Modal' });
         $scope.login = {};
-        $scope.hideFolders = $scope.hideFavorite = true;
+        $scope.hideFolders = $scope.hideFavorite = $scope.fromOrg = true;
 
         apiService.logins.getAdmin({ id: loginId }, function (login) {
             $scope.login = cipherService.decryptLogin(login);
+            $scope.useTotp = $scope.login.organizationUseTotp;
         });
 
         $scope.save = function (model) {
@@ -66,4 +67,15 @@
         $scope.close = function () {
             $uibModalInstance.dismiss('cancel');
         };
+
+        $scope.showUpgrade = function () {
+            $uibModal.open({
+                animation: true,
+                templateUrl: 'app/views/paidOrgRequired.html',
+                controller: 'paidOrgRequiredController',
+                resolve: {
+                    orgId: function () { return orgId; }
+                }
+            });
+        };
     });

src/app/organization/views/organizationBilling.html

@@ -6,7 +6,7 @@
 </section>
 <section class="content">
     <div class="callout callout-warning" ng-if="subscription && subscription.cancelled">
-        <h4><i class="fa fa-warning"></i> Cancelled</h4>
+        <h4><i class="fa fa-warning"></i> Canceled</h4>
         The subscription to this organization has been canceled.
     </div>
     <div class="callout callout-warning" ng-if="subscription && subscription.markedForCancel">
@@ -19,7 +19,7 @@
             Reinstate Plan
         </button>
     </div>
-    <div class="box">
+    <div class="box box-default">
         <div class="box-header with-border">
             <h3 class="box-title">Plan</h3>
         </div>
@@ -36,7 +36,10 @@
                 <div class="col-sm-6">
                     <dl>
                         <dt>Status</dt>
-                        <dd style="text-transform: capitalize;">{{(subscription && subscription.status) || '-'}}</dd>
+                        <dd>
+                            <span style="text-transform: capitalize;">{{(subscription && subscription.status) || '-'}}</span>
+                            <span ng-if="subscription.markedForCancel">- marked for cancellation</span>
+                        </dd>
                         <dt>Next Charge</dt>
                         <dd>{{nextInvoice ? ((nextInvoice.date | date: format: mediumDate) + ', ' + (nextInvoice.amount | currency:'$')) : '-'}}</dd>
                     </dl>
@@ -78,7 +81,7 @@
             </button>
         </div>
     </div>
-    <div class="box">
+    <div class="box box-default">
         <div class="box-header with-border">
             <h3 class="box-title">User Seats</h3>
         </div>
@@ -99,7 +102,33 @@
             </button>
         </div>
     </div>
-    <div class="box">
+    <div class="box box-default" ng-if="storage">
+        <div class="box-header with-border">
+            <h3 class="box-title">Storage</h3>
+        </div>
+        <div class="box-body">
+            <p>
+                You plan has a total of {{storage.maxGb}} GB of encrypted file storage.
+                You are currently using {{storage.currentName}}.
+            </p>
+            <div class="progress" style="margin: 0;">
+                <div class="progress-bar progress-bar-info" role="progressbar"
+                     aria-valuenow="{{storage.percentage}}" aria-valuemin="0" aria-valuemax="1"
+                     style="min-width: 50px; width: {{storage.percentage}}%;">
+                    {{storage.percentage}}%
+                </div>
+            </div>
+        </div>
+        <div class="box-footer">
+            <button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(true)">
+                Add Storage
+            </button>
+            <button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(false)">
+                Remove Storage
+            </button>
+        </div>
+    </div>
+    <div class="box box-default">
         <div class="box-header with-border">
             <h3 class="box-title">Payment Method</h3>
         </div>
@@ -112,7 +141,7 @@
             </div>
             <div ng-show="!loading && paymentSource">
                 <i class="fa" ng-class="{'fa-credit-card': paymentSource.type === 0,
-                   'fa-university': paymentSource.type === 1}"></i>
+                   'fa-university': paymentSource.type === 1, 'fa-paypal fa-fw text-blue': paymentSource.type === 2}"></i>
                 {{paymentSource.description}}
             </div>
         </div>
@@ -122,7 +151,7 @@
             </button>
         </div>
     </div>
-    <div class="box">
+    <div class="box box-default">
         <div class="box-header with-border">
             <h3 class="box-title">Charges</h3>
         </div>
@@ -140,7 +169,7 @@
                             <td style="width: 200px">
                                 {{charge.date | date: format: mediumDate}}
                             </td>
-                            <td>
+                            <td style="min-width: 150px">
                                 {{charge.paymentSource}}
                             </td>
                             <td style="width: 150px; text-transform: capitalize;">
@@ -155,7 +184,7 @@
             </div>
         </div>
         <div class="box-footer">
-            Note: Any charges will appears on your credit card statement as <b>BITWARDEN</b>.
+            Note: Any charges will appear on your statement as <b>BITWARDEN</b>.
         </div>
     </div>
 </section>

src/app/organization/views/organizationBillingChangePayment.html

@@ -1,364 +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-credit-card"></i>
-        {{existingPaymentMethod ? 'Change Payment Method' : 'Add Payment Method'}}
-    </h4>
-</div>
-<form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise">
-    <div class="modal-body">
-        <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="row">
-            <div class="col-md-6">
-                <div class="form-group" show-errors>
-                    <label for="card_number">Card Number</label>
-                    <input type="text" id="card_number" name="card_number" ng-model="card.number"
-                           class="form-control" cc-number required api-field />
-                </div>
-            </div>
-        </div>
-        <ul class="list-inline">
-            <li><div class="cc visa"></div></li>
-            <li><div class="cc mastercard"></div></li>
-            <li><div class="cc amex"></div></li>
-            <li><div class="cc discover"></div></li>
-            <li><div class="cc diners"></div></li>
-            <li><div class="cc jcb"></div></li>
-        </ul>
-        <div class="row">
-            <div class="col-sm-4">
-                <div class="form-group" show-errors>
-                    <label for="exp_month">Expiration Month</label>
-                    <select id="exp_month" class="form-control" ng-model="card.exp_month" required cc-exp-month
-                            name="exp_month" api-field>
-                        <option value="">-- Select --</option>
-                        <option value="01">01 - January</option>
-                        <option value="02">02 - February</option>
-                        <option value="03">03 - March</option>
-                        <option value="04">04 - April</option>
-                        <option value="05">05 - May</option>
-                        <option value="06">06 - June</option>
-                        <option value="07">07 - July</option>
-                        <option value="08">08 - August</option>
-                        <option value="09">09 - September</option>
-                        <option value="10">10 - October</option>
-                        <option value="11">11 - November</option>
-                        <option value="12">12 - December</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-sm-4">
-                <div class="form-group" show-errors>
-                    <label for="exp_year">Expiration Year</label>
-                    <select id="exp_year" class="form-control" ng-model="card.exp_year" required cc-exp-year
-                            name="exp_year" api-field>
-                        <option value="">-- Select --</option>
-                        <option value="17">2017</option>
-                        <option value="18">2018</option>
-                        <option value="19">2019</option>
-                        <option value="20">2020</option>
-                        <option value="21">2021</option>
-                        <option value="22">2022</option>
-                        <option value="23">2023</option>
-                        <option value="24">2024</option>
-                        <option value="25">2025</option>
-                        <option value="26">2026</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-sm-4">
-                <div class="form-group" show-errors>
-                    <label for="cvc">
-                        CVC
-                        <a href="https://www.cvvnumber.com/cvv.html" target="_blank" title="What is this?"
-                           rel="noopener noreferrer">
-                            <i class="fa fa-question-circle"></i>
-                        </a>
-                    </label>
-                    <input type="text" id="cvc" ng-model="card.cvc" class="form-control" name="cvc"
-                           cc-type="number.$ccType" cc-cvc required api-field />
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-6">
-                <div class="form-group" show-errors>
-                    <label for="address_country">Country</label>
-                    <select id="address_country" class="form-control" ng-model="card.address_country"
-                            required name="address_country" api-field>
-                        <option value="">-- Select --</option>
-                        <option value="US">United States</option>
-                        <option value="CN">China</option>
-                        <option value="FR">France</option>
-                        <option value="DE">Germany</option>
-                        <option value="CA">Canada</option>
-                        <option value="GB">United Kingdom</option>
-                        <option value="AU">Australia</option>
-                        <option value="IN">India</option>
-                        <option value="-" disabled></option>
-                        <option value="AF">Afghanistan</option>
-                        <option value="AX">Åland Islands</option>
-                        <option value="AL">Albania</option>
-                        <option value="DZ">Algeria</option>
-                        <option value="AS">American Samoa</option>
-                        <option value="AD">Andorra</option>
-                        <option value="AO">Angola</option>
-                        <option value="AI">Anguilla</option>
-                        <option value="AQ">Antarctica</option>
-                        <option value="AG">Antigua and Barbuda</option>
-                        <option value="AR">Argentina</option>
-                        <option value="AM">Armenia</option>
-                        <option value="AW">Aruba</option>
-                        <option value="AT">Austria</option>
-                        <option value="AZ">Azerbaijan</option>
-                        <option value="BS">Bahamas</option>
-                        <option value="BH">Bahrain</option>
-                        <option value="BD">Bangladesh</option>
-                        <option value="BB">Barbados</option>
-                        <option value="BY">Belarus</option>
-                        <option value="BE">Belgium</option>
-                        <option value="BZ">Belize</option>
-                        <option value="BJ">Benin</option>
-                        <option value="BM">Bermuda</option>
-                        <option value="BT">Bhutan</option>
-                        <option value="BO">Bolivia, Plurinational State of</option>
-                        <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
-                        <option value="BA">Bosnia and Herzegovina</option>
-                        <option value="BW">Botswana</option>
-                        <option value="BV">Bouvet Island</option>
-                        <option value="BR">Brazil</option>
-                        <option value="IO">British Indian Ocean Territory</option>
-                        <option value="BN">Brunei Darussalam</option>
-                        <option value="BG">Bulgaria</option>
-                        <option value="BF">Burkina Faso</option>
-                        <option value="BI">Burundi</option>
-                        <option value="KH">Cambodia</option>
-                        <option value="CM">Cameroon</option>
-                        <option value="CV">Cape Verde</option>
-                        <option value="KY">Cayman Islands</option>
-                        <option value="CF">Central African Republic</option>
-                        <option value="TD">Chad</option>
-                        <option value="CL">Chile</option>
-                        <option value="CX">Christmas Island</option>
-                        <option value="CC">Cocos (Keeling) Islands</option>
-                        <option value="CO">Colombia</option>
-                        <option value="KM">Comoros</option>
-                        <option value="CG">Congo</option>
-                        <option value="CD">Congo, the Democratic Republic of the</option>
-                        <option value="CK">Cook Islands</option>
-                        <option value="CR">Costa Rica</option>
-                        <option value="CI">Côte d'Ivoire</option>
-                        <option value="HR">Croatia</option>
-                        <option value="CU">Cuba</option>
-                        <option value="CW">Curaçao</option>
-                        <option value="CY">Cyprus</option>
-                        <option value="CZ">Czech Republic</option>
-                        <option value="DK">Denmark</option>
-                        <option value="DJ">Djibouti</option>
-                        <option value="DM">Dominica</option>
-                        <option value="DO">Dominican Republic</option>
-                        <option value="EC">Ecuador</option>
-                        <option value="EG">Egypt</option>
-                        <option value="SV">El Salvador</option>
-                        <option value="GQ">Equatorial Guinea</option>
-                        <option value="ER">Eritrea</option>
-                        <option value="EE">Estonia</option>
-                        <option value="ET">Ethiopia</option>
-                        <option value="FK">Falkland Islands (Malvinas)</option>
-                        <option value="FO">Faroe Islands</option>
-                        <option value="FJ">Fiji</option>
-                        <option value="FI">Finland</option>
-                        <option value="GF">French Guiana</option>
-                        <option value="PF">French Polynesia</option>
-                        <option value="TF">French Southern Territories</option>
-                        <option value="GA">Gabon</option>
-                        <option value="GM">Gambia</option>
-                        <option value="GE">Georgia</option>
-                        <option value="GH">Ghana</option>
-                        <option value="GI">Gibraltar</option>
-                        <option value="GR">Greece</option>
-                        <option value="GL">Greenland</option>
-                        <option value="GD">Grenada</option>
-                        <option value="GP">Guadeloupe</option>
-                        <option value="GU">Guam</option>
-                        <option value="GT">Guatemala</option>
-                        <option value="GG">Guernsey</option>
-                        <option value="GN">Guinea</option>
-                        <option value="GW">Guinea-Bissau</option>
-                        <option value="GY">Guyana</option>
-                        <option value="HT">Haiti</option>
-                        <option value="HM">Heard Island and McDonald Islands</option>
-                        <option value="VA">Holy See (Vatican City State)</option>
-                        <option value="HN">Honduras</option>
-                        <option value="HK">Hong Kong</option>
-                        <option value="HU">Hungary</option>
-                        <option value="IS">Iceland</option>
-                        <option value="ID">Indonesia</option>
-                        <option value="IR">Iran, Islamic Republic of</option>
-                        <option value="IQ">Iraq</option>
-                        <option value="IE">Ireland</option>
-                        <option value="IM">Isle of Man</option>
-                        <option value="IL">Israel</option>
-                        <option value="IT">Italy</option>
-                        <option value="JM">Jamaica</option>
-                        <option value="JP">Japan</option>
-                        <option value="JE">Jersey</option>
-                        <option value="JO">Jordan</option>
-                        <option value="KZ">Kazakhstan</option>
-                        <option value="KE">Kenya</option>
-                        <option value="KI">Kiribati</option>
-                        <option value="KP">Korea, Democratic People's Republic of</option>
-                        <option value="KR">Korea, Republic of</option>
-                        <option value="KW">Kuwait</option>
-                        <option value="KG">Kyrgyzstan</option>
-                        <option value="LA">Lao People's Democratic Republic</option>
-                        <option value="LV">Latvia</option>
-                        <option value="LB">Lebanon</option>
-                        <option value="LS">Lesotho</option>
-                        <option value="LR">Liberia</option>
-                        <option value="LY">Libya</option>
-                        <option value="LI">Liechtenstein</option>
-                        <option value="LT">Lithuania</option>
-                        <option value="LU">Luxembourg</option>
-                        <option value="MO">Macao</option>
-                        <option value="MK">Macedonia, the former Yugoslav Republic of</option>
-                        <option value="MG">Madagascar</option>
-                        <option value="MW">Malawi</option>
-                        <option value="MY">Malaysia</option>
-                        <option value="MV">Maldives</option>
-                        <option value="ML">Mali</option>
-                        <option value="MT">Malta</option>
-                        <option value="MH">Marshall Islands</option>
-                        <option value="MQ">Martinique</option>
-                        <option value="MR">Mauritania</option>
-                        <option value="MU">Mauritius</option>
-                        <option value="YT">Mayotte</option>
-                        <option value="MX">Mexico</option>
-                        <option value="FM">Micronesia, Federated States of</option>
-                        <option value="MD">Moldova, Republic of</option>
-                        <option value="MC">Monaco</option>
-                        <option value="MN">Mongolia</option>
-                        <option value="ME">Montenegro</option>
-                        <option value="MS">Montserrat</option>
-                        <option value="MA">Morocco</option>
-                        <option value="MZ">Mozambique</option>
-                        <option value="MM">Myanmar</option>
-                        <option value="NA">Namibia</option>
-                        <option value="NR">Nauru</option>
-                        <option value="NP">Nepal</option>
-                        <option value="NL">Netherlands</option>
-                        <option value="NC">New Caledonia</option>
-                        <option value="NZ">New Zealand</option>
-                        <option value="NI">Nicaragua</option>
-                        <option value="NE">Niger</option>
-                        <option value="NG">Nigeria</option>
-                        <option value="NU">Niue</option>
-                        <option value="NF">Norfolk Island</option>
-                        <option value="MP">Northern Mariana Islands</option>
-                        <option value="NO">Norway</option>
-                        <option value="OM">Oman</option>
-                        <option value="PK">Pakistan</option>
-                        <option value="PW">Palau</option>
-                        <option value="PS">Palestinian Territory, Occupied</option>
-                        <option value="PA">Panama</option>
-                        <option value="PG">Papua New Guinea</option>
-                        <option value="PY">Paraguay</option>
-                        <option value="PE">Peru</option>
-                        <option value="PH">Philippines</option>
-                        <option value="PN">Pitcairn</option>
-                        <option value="PL">Poland</option>
-                        <option value="PT">Portugal</option>
-                        <option value="PR">Puerto Rico</option>
-                        <option value="QA">Qatar</option>
-                        <option value="RE">Réunion</option>
-                        <option value="RO">Romania</option>
-                        <option value="RU">Russian Federation</option>
-                        <option value="RW">Rwanda</option>
-                        <option value="BL">Saint Barthélemy</option>
-                        <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
-                        <option value="KN">Saint Kitts and Nevis</option>
-                        <option value="LC">Saint Lucia</option>
-                        <option value="MF">Saint Martin (French part)</option>
-                        <option value="PM">Saint Pierre and Miquelon</option>
-                        <option value="VC">Saint Vincent and the Grenadines</option>
-                        <option value="WS">Samoa</option>
-                        <option value="SM">San Marino</option>
-                        <option value="ST">Sao Tome and Principe</option>
-                        <option value="SA">Saudi Arabia</option>
-                        <option value="SN">Senegal</option>
-                        <option value="RS">Serbia</option>
-                        <option value="SC">Seychelles</option>
-                        <option value="SL">Sierra Leone</option>
-                        <option value="SG">Singapore</option>
-                        <option value="SX">Sint Maarten (Dutch part)</option>
-                        <option value="SK">Slovakia</option>
-                        <option value="SI">Slovenia</option>
-                        <option value="SB">Solomon Islands</option>
-                        <option value="SO">Somalia</option>
-                        <option value="ZA">South Africa</option>
-                        <option value="GS">South Georgia and the South Sandwich Islands</option>
-                        <option value="SS">South Sudan</option>
-                        <option value="ES">Spain</option>
-                        <option value="LK">Sri Lanka</option>
-                        <option value="SD">Sudan</option>
-                        <option value="SR">Suriname</option>
-                        <option value="SJ">Svalbard and Jan Mayen</option>
-                        <option value="SZ">Swaziland</option>
-                        <option value="SE">Sweden</option>
-                        <option value="CH">Switzerland</option>
-                        <option value="SY">Syrian Arab Republic</option>
-                        <option value="TW">Taiwan, Province of China</option>
-                        <option value="TJ">Tajikistan</option>
-                        <option value="TZ">Tanzania, United Republic of</option>
-                        <option value="TH">Thailand</option>
-                        <option value="TL">Timor-Leste</option>
-                        <option value="TG">Togo</option>
-                        <option value="TK">Tokelau</option>
-                        <option value="TO">Tonga</option>
-                        <option value="TT">Trinidad and Tobago</option>
-                        <option value="TN">Tunisia</option>
-                        <option value="TR">Turkey</option>
-                        <option value="TM">Turkmenistan</option>
-                        <option value="TC">Turks and Caicos Islands</option>
-                        <option value="TV">Tuvalu</option>
-                        <option value="UG">Uganda</option>
-                        <option value="UA">Ukraine</option>
-                        <option value="AE">United Arab Emirates</option>
-                        <option value="UM">United States Minor Outlying Islands</option>
-                        <option value="UY">Uruguay</option>
-                        <option value="UZ">Uzbekistan</option>
-                        <option value="VU">Vanuatu</option>
-                        <option value="VE">Venezuela, Bolivarian Republic of</option>
-                        <option value="VN">Viet Nam</option>
-                        <option value="VG">Virgin Islands, British</option>
-                        <option value="VI">Virgin Islands, U.S.</option>
-                        <option value="WF">Wallis and Futuna</option>
-                        <option value="EH">Western Sahara</option>
-                        <option value="YE">Yemen</option>
-                        <option value="ZM">Zambia</option>
-                        <option value="ZW">Zimbabwe</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-sm-6">
-                <div class="form-group" show-errors>
-                    <label for="address_zip"
-                           ng-bind="card.address_country === 'US' ? 'Zip Code' : 'Postal Code'"></label>
-                    <input type="text" id="address_zip" ng-model="card.address_zip"
-                           class="form-control" required name="address_zip" api-field />
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading">
-            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Submit
-        </button>
-        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
-    </div>
-</form>

src/app/organization/views/organizationVault.html

@@ -46,6 +46,11 @@
                                                 <i class="fa fa-fw fa-pencil"></i> Edit
                                             </a>
                                         </li>
+                                        <li>
+                                            <a href="#" stop-click ng-click="attachments(login)">
+                                                <i class="fa fa-fw fa-paperclip"></i> Attachments
+                                            </a>
+                                        </li>
                                         <li>
                                             <a href="#" stop-click ng-click="editCollections(login)">
                                                 <i class="fa fa-fw fa-cubes"></i> Collections

src/app/services/apiService.js

@@ -40,7 +40,20 @@
             del: { url: _apiUri + '/ciphers/:id/delete', method: 'POST', params: { id: '@id' } },
             delAdmin: { url: _apiUri + '/ciphers/:id/delete-admin', method: 'POST', params: { id: '@id' } },
             delMany: { url: _apiUri + '/ciphers/delete', method: 'POST' },
-            moveMany: { url: _apiUri + '/ciphers/move', method: 'POST' }
+            moveMany: { url: _apiUri + '/ciphers/move', method: 'POST' },
+            postAttachment: {
+                url: _apiUri + '/ciphers/:id/attachment',
+                method: 'POST',
+                headers: { 'Content-Type': undefined },
+                params: { id: '@id' }
+            },
+            postShareAttachment: {
+                url: _apiUri + '/ciphers/:id/attachment/:attachmentId/share?organizationId=:orgId',
+                method: 'POST',
+                headers: { 'Content-Type': undefined },
+                params: { id: '@id', attachmentId: '@attachmentId', orgId: '@orgId' }
+            },
+            delAttachment: { url: _apiUri + '/ciphers/:id/attachment/:attachmentId/delete', method: 'POST', params: { id: '@id', attachmentId: '@attachmentId' } }
         });
 
         _service.organizations = $resource(_apiUri + '/organizations/:id', {}, {
@@ -51,6 +64,7 @@
             put: { method: 'POST', params: { id: '@id' } },
             putPayment: { url: _apiUri + '/organizations/:id/payment', method: 'POST', params: { id: '@id' } },
             putSeat: { url: _apiUri + '/organizations/:id/seat', method: 'POST', params: { id: '@id' } },
+            putStorage: { url: _apiUri + '/organizations/:id/storage', method: 'POST', params: { id: '@id' } },
             putUpgrade: { url: _apiUri + '/organizations/:id/upgrade', method: 'POST', params: { id: '@id' } },
             putCancel: { url: _apiUri + '/organizations/:id/cancel', method: 'POST', params: { id: '@id' } },
             putReinstate: { url: _apiUri + '/organizations/:id/reinstate', method: 'POST', params: { id: '@id' } },
@@ -98,20 +112,44 @@
             register: { url: _apiUri + '/accounts/register', method: 'POST', params: {} },
             emailToken: { url: _apiUri + '/accounts/email-token', method: 'POST', params: {} },
             email: { url: _apiUri + '/accounts/email', method: 'POST', params: {} },
+            verifyEmailToken: { url: _apiUri + '/accounts/verify-email-token', method: 'POST', params: {} },
+            verifyEmail: { url: _apiUri + '/accounts/verify-email', method: 'POST', params: {} },
             putPassword: { url: _apiUri + '/accounts/password', method: 'POST', params: {} },
             getProfile: { url: _apiUri + '/accounts/profile', method: 'GET', params: {} },
             putProfile: { url: _apiUri + '/accounts/profile', method: 'POST', params: {} },
             getDomains: { url: _apiUri + '/accounts/domains', method: 'GET', params: {} },
             putDomains: { url: _apiUri + '/accounts/domains', method: 'POST', params: {} },
-            getTwoFactor: { url: _apiUri + '/accounts/two-factor', method: 'GET', params: {} },
-            putTwoFactor: { url: _apiUri + '/accounts/two-factor', method: 'POST', params: {} },
-            postTwoFactorRecover: { url: _apiUri + '/accounts/two-factor-recover', method: 'POST', params: {} },
             postPasswordHint: { url: _apiUri + '/accounts/password-hint', method: 'POST', params: {} },
             putSecurityStamp: { url: _apiUri + '/accounts/security-stamp', method: 'POST', params: {} },
             putKeys: { url: _apiUri + '/accounts/keys', method: 'POST', params: {} },
             putKey: { url: _apiUri + '/accounts/key', method: 'POST', params: {} },
             'import': { url: _apiUri + '/accounts/import', method: 'POST', params: {} },
-            postDelete: { url: _apiUri + '/accounts/delete', method: 'POST', params: {} }
+            postDelete: { url: _apiUri + '/accounts/delete', method: 'POST', params: {} },
+            postPremium: { url: _apiUri + '/accounts/premium', method: 'POST', params: {} },
+            putStorage: { url: _apiUri + '/accounts/storage', method: 'POST', params: {} },
+            putPayment: { url: _apiUri + '/accounts/payment', method: 'POST', params: {} },
+            putCancelPremium: { url: _apiUri + '/accounts/cancel-premium', method: 'POST', params: {} },
+            putReinstatePremium: { url: _apiUri + '/accounts/reinstate-premium', method: 'POST', params: {} },
+            getBilling: { url: _apiUri + '/accounts/billing', method: 'GET', params: {} }
+        });
+
+        _service.twoFactor = $resource(_apiUri + '/two-factor', {}, {
+            list: { method: 'GET', params: {} },
+            getEmail: { url: _apiUri + '/two-factor/get-email', method: 'POST', params: {} },
+            getU2f: { url: _apiUri + '/two-factor/get-u2f', method: 'POST', params: {} },
+            getDuo: { url: _apiUri + '/two-factor/get-duo', method: 'POST', params: {} },
+            getAuthenticator: { url: _apiUri + '/two-factor/get-authenticator', method: 'POST', params: {} },
+            getYubi: { url: _apiUri + '/two-factor/get-yubikey', method: 'POST', params: {} },
+            sendEmail: { url: _apiUri + '/two-factor/send-email', method: 'POST', params: {} },
+            sendEmailLogin: { url: _apiUri + '/two-factor/send-email-login', method: 'POST', params: {} },
+            putEmail: { url: _apiUri + '/two-factor/email', method: 'POST', params: {} },
+            putU2f: { url: _apiUri + '/two-factor/u2f', method: 'POST', params: {} },
+            putAuthenticator: { url: _apiUri + '/two-factor/authenticator', method: 'POST', params: {} },
+            putDuo: { url: _apiUri + '/two-factor/duo', method: 'POST', params: {} },
+            putYubi: { url: _apiUri + '/two-factor/yubikey', method: 'POST', params: {} },
+            disable: { url: _apiUri + '/two-factor/disable', method: 'POST', params: {} },
+            recover: { url: _apiUri + '/two-factor/recover', method: 'POST', params: {} },
+            getRecover: { url: _apiUri + '/two-factor/get-recover', method: 'POST', params: {} }
         });
 
         _service.settings = $resource(_apiUri + '/settings', {}, {
@@ -135,7 +173,7 @@
         });
 
         _service.hibp = $resource('https://haveibeenpwned.com/api/v2/breachedaccount/:email', {}, {
-            get: { method: 'GET', params: { email: '@email' }, isArray: true},
+            get: { method: 'GET', params: { email: '@email' }, isArray: true },
         });
 
         function transformUrlEncoded(data) {

src/app/services/authService.js

@@ -1,42 +1,58 @@
 angular
     .module('bit.services')
 
-    .factory('authService', function (cryptoService, apiService, tokenService, $q, jwtHelper, $rootScope) {
+    .factory('authService', function (cryptoService, apiService, tokenService, $q, jwtHelper, $rootScope, constants) {
         var _service = {},
             _userProfile = null;
 
-        _service.logIn = function (email, masterPassword, token, provider) {
+        _service.logIn = function (email, masterPassword, token, provider, remember) {
             email = email.toLowerCase();
-            var key = cryptoService.makeKey(masterPassword, email);
-
-            var request = {
-                username: email,
-                password: cryptoService.hashPassword(masterPassword, key),
-                grant_type: 'password',
-                scope: 'api offline_access',
-                client_id: 'web'
-            };
-
-            if (token && typeof (provider) !== 'undefined' && provider !== null) {
-                request.twoFactorToken = token.replace(' ', '');
-                request.twoFactorProvider = provider;
-            }
-
-            // TODO: device information one day?
 
             var deferred = $q.defer();
 
-            apiService.identity.token(request).$promise.then(function (response) {
+            var makeResult;
+            cryptoService.makeKeyAndHash(email, masterPassword).then(function (result) {
+                makeResult = result;
+
+                var request = {
+                    username: email,
+                    password: result.hash,
+                    grant_type: 'password',
+                    scope: 'api offline_access',
+                    client_id: 'web'
+                };
+
+                // TODO: device information one day?
+
+                if (token && typeof (provider) !== 'undefined' && provider !== null) {
+                    remember = remember || remember !== false;
+
+                    request.twoFactorToken = token;
+                    request.twoFactorProvider = provider;
+                    request.twoFactorRemember = remember ? '1' : '0';
+                }
+                else if (tokenService.getTwoFactorToken(email)) {
+                    request.twoFactorToken = tokenService.getTwoFactorToken(email);
+                    request.twoFactorProvider = constants.twoFactorProvider.remember;
+                    request.twoFactorRemember = '0';
+                }
+
+                return apiService.identity.token(request).$promise;
+            }).then(function (response) {
                 if (!response || !response.access_token) {
                     return;
                 }
 
                 tokenService.setToken(response.access_token);
                 tokenService.setRefreshToken(response.refresh_token);
-                cryptoService.setKey(key);
+                cryptoService.setKey(makeResult.key);
+
+                if (response.TwoFactorToken) {
+                    tokenService.setTwoFactorToken(response.TwoFactorToken, email);
+                }
 
                 if (response.Key) {
-                    cryptoService.setEncKey(response.Key, key);
+                    cryptoService.setEncKey(response.Key, makeResult.key);
                 }
 
                 if (response.PrivateKey) {
@@ -63,8 +79,10 @@ angular
             }, function (error) {
                 _service.logOut();
 
-                if (error.status === 400 && error.data.TwoFactorProviders && error.data.TwoFactorProviders.length) {
-                    deferred.resolve(error.data.TwoFactorProviders);
+                if (error.status === 400 && error.data.TwoFactorProviders2 &&
+                    Object.keys(error.data.TwoFactorProviders2).length) {
+                    tokenService.clearTwoFactorToken(email);
+                    deferred.resolve(error.data.TwoFactorProviders2);
                 }
                 else {
                     deferred.reject(error);
@@ -75,8 +93,7 @@ angular
         };
 
         _service.logOut = function () {
-            tokenService.clearToken();
-            tokenService.clearRefreshToken();
+            tokenService.clearTokens();
             cryptoService.clearKeys();
             $rootScope.vaultFolders = $rootScope.vaultLogins = null;
             _userProfile = null;
@@ -106,11 +123,12 @@ angular
                 return _setDeferred.promise;
             }
 
-            var decodedToken = jwtHelper.decodeToken(token);
             apiService.accounts.getProfile({}, function (profile) {
                 _userProfile = {
-                    id: decodedToken.name,
-                    email: decodedToken.email,
+                    id: profile.Id,
+                    email: profile.Email,
+                    emailVerified: profile.EmailVerified,
+                    premium: profile.Premium,
                     extended: {
                         name: profile.Name,
                         twoFactorEnabled: profile.TwoFactorEnabled,
@@ -129,8 +147,10 @@ angular
                             type: profile.Organizations[i].Type,
                             enabled: profile.Organizations[i].Enabled,
                             maxCollections: profile.Organizations[i].MaxCollections,
+                            maxStorageGb: profile.Organizations[i].MaxStorageGb,
                             seats: profile.Organizations[i].Seats,
-                            useGroups: profile.Organizations[i].UseGroups
+                            useGroups: profile.Organizations[i].UseGroups,
+                            useTotp: profile.Organizations[i].UseTotp
                         };
                     }
 
@@ -160,8 +180,10 @@ angular
                         type: 0, // 0 = Owner
                         enabled: true,
                         maxCollections: org.MaxCollections,
+                        maxStorageGb: org.MaxStorageGb,
                         seats: org.Seats,
-                        useGroups: org.UseGroups
+                        useGroups: org.UseGroups,
+                        useTotp: org.UseTotp
                     };
                     profile.organizations[o.id] = o;
 
@@ -195,6 +217,15 @@ angular
             });
         };
 
+        _service.updateProfilePremium = function (isPremium) {
+            return _service.getUserProfile().then(function (profile) {
+                if (profile) {
+                    profile.premium = isPremium;
+                    _userProfile = profile;
+                }
+            });
+        };
+
         _service.isAuthenticated = function () {
             return tokenService.getToken() !== null;
         };

src/app/services/cipherService.js

@@ -1,7 +1,7 @@
 angular
     .module('bit.services')
 
-    .factory('cipherService', function (cryptoService, apiService, $q) {
+    .factory('cipherService', function (cryptoService, apiService, $q, $window) {
         var _service = {};
 
         _service.decryptLogins = function (encryptedLogins) {
@@ -15,7 +15,7 @@ angular
             return unencryptedLogins;
         };
 
-        _service.decryptLogin = function (encryptedLogin) {
+        _service.decryptLogin = function (encryptedLogin, isCipher) {
             if (!encryptedLogin) throw "encryptedLogin is undefined or null";
 
             var key = null;
@@ -31,13 +31,29 @@ angular
                 folderId: encryptedLogin.FolderId,
                 favorite: encryptedLogin.Favorite,
                 edit: encryptedLogin.Edit,
-                name: cryptoService.decrypt(encryptedLogin.Name, key),
-                uri: encryptedLogin.Uri && encryptedLogin.Uri !== '' ? cryptoService.decrypt(encryptedLogin.Uri, key) : null,
-                username: encryptedLogin.Username && encryptedLogin.Username !== '' ? cryptoService.decrypt(encryptedLogin.Username, key) : null,
-                password: encryptedLogin.Password && encryptedLogin.Password !== '' ? cryptoService.decrypt(encryptedLogin.Password, key) : null,
-                notes: encryptedLogin.Notes && encryptedLogin.Notes !== '' ? cryptoService.decrypt(encryptedLogin.Notes, key) : null
+                organizationUseTotp: encryptedLogin.OrganizationUseTotp,
+                attachments: null
             };
 
+            var loginData = encryptedLogin.Data || encryptedLogin;
+            if (loginData) {
+                login.name = cryptoService.decrypt(loginData.Name, key);
+                login.uri = loginData.Uri && loginData.Uri !== '' ? cryptoService.decrypt(loginData.Uri, key) : null;
+                login.username = loginData.Username && loginData.Username !== '' ? cryptoService.decrypt(loginData.Username, key) : null;
+                login.password = loginData.Password && loginData.Password !== '' ? cryptoService.decrypt(loginData.Password, key) : null;
+                login.notes = loginData.Notes && loginData.Notes !== '' ? cryptoService.decrypt(loginData.Notes, key) : null;
+                login.totp = loginData.Totp && loginData.Totp !== '' ? cryptoService.decrypt(loginData.Totp, key) : null;
+            }
+
+            if (!encryptedLogin.Attachments) {
+                return login;
+            }
+
+            login.attachments = [];
+            for (var i = 0; i < encryptedLogin.Attachments.length; i++) {
+                login.attachments.push(_service.decryptAttachment(key, encryptedLogin.Attachments[i]));
+            }
+
             return login;
         };
 
@@ -56,14 +72,68 @@ angular
                 folderId: encryptedCipher.FolderId,
                 favorite: encryptedCipher.Favorite,
                 edit: encryptedCipher.Edit,
-                name: _service.decryptProperty(encryptedCipher.Data.Name, key, false),
-                username: _service.decryptProperty(encryptedCipher.Data.Username, key, true),
-                password: _service.decryptProperty(encryptedCipher.Data.Password, key, true)
+                organizationUseTotp: encryptedCipher.OrganizationUseTotp,
+                hasAttachments: !!encryptedCipher.Attachments && encryptedCipher.Attachments.length > 0
             };
 
+            var loginData = encryptedCipher.Data || encryptedCipher;
+            if (loginData) {
+                login.name = _service.decryptProperty(loginData.Name, key, false);
+                login.username = _service.decryptProperty(loginData.Username, key, true);
+                login.password = _service.decryptProperty(loginData.Password, key, true)
+            }
+
             return login;
         };
 
+        _service.decryptAttachment = function (key, encryptedAttachment) {
+            if (!encryptedAttachment) throw "encryptedAttachment is undefined or null";
+
+            return {
+                id: encryptedAttachment.Id,
+                url: encryptedAttachment.Url,
+                fileName: cryptoService.decrypt(encryptedAttachment.FileName, key),
+                size: encryptedAttachment.SizeName
+            };
+        };
+
+        _service.downloadAndDecryptAttachment = function (key, decryptedAttachment, openDownload) {
+            var deferred = $q.defer();
+            var req = new XMLHttpRequest();
+            req.open('GET', decryptedAttachment.url, true);
+            req.responseType = 'arraybuffer';
+            req.onload = function (evt) {
+                if (!req.response) {
+                    deferred.reject('No response');
+                    // error
+                    return;
+                }
+
+                cryptoService.decryptFromBytes(req.response, key).then(function (decBuf) {
+                    if (openDownload) {
+                        var blob = new Blob([decBuf]);
+
+                        // IE hack. ref http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
+                        if ($window.navigator.msSaveOrOpenBlob) {
+                            $window.navigator.msSaveBlob(blob, decryptedAttachment.fileName);
+                        }
+                        else {
+                            var a = $window.document.createElement('a');
+                            a.href = $window.URL.createObjectURL(blob);
+                            a.download = decryptedAttachment.fileName;
+                            $window.document.body.appendChild(a);
+                            a.click();
+                            $window.document.body.removeChild(a);
+                        }
+                    }
+
+                    deferred.resolve(new Uint8Array(decBuf));
+                });
+            };
+            req.send(null);
+            return deferred.promise;
+        };
+
         _service.decryptFolders = function (encryptedFolders) {
             if (!encryptedFolders) throw "encryptedFolders is undefined or null";
 
@@ -144,14 +214,14 @@ angular
             return encryptedLogins;
         };
 
-        _service.encryptLogin = function (unencryptedLogin, key) {
+        _service.encryptLogin = function (unencryptedLogin, key, attachments) {
             if (!unencryptedLogin) throw "unencryptedLogin is undefined or null";
 
             if (unencryptedLogin.organizationId) {
                 key = key || cryptoService.getOrgKey(unencryptedLogin.organizationId);
             }
 
-            return {
+            var login = {
                 id: unencryptedLogin.id,
                 'type': 1,
                 organizationId: unencryptedLogin.organizationId || null,
@@ -161,8 +231,45 @@ angular
                 name: cryptoService.encrypt(unencryptedLogin.name, key),
                 username: !unencryptedLogin.username || unencryptedLogin.username === '' ? null : cryptoService.encrypt(unencryptedLogin.username, key),
                 password: !unencryptedLogin.password || unencryptedLogin.password === '' ? null : cryptoService.encrypt(unencryptedLogin.password, key),
-                notes: !unencryptedLogin.notes || unencryptedLogin.notes === '' ? null : cryptoService.encrypt(unencryptedLogin.notes, key)
+                notes: !unencryptedLogin.notes || unencryptedLogin.notes === '' ? null : cryptoService.encrypt(unencryptedLogin.notes, key),
+                totp: !unencryptedLogin.totp || unencryptedLogin.totp === '' ? null : cryptoService.encrypt(unencryptedLogin.totp, key)
             };
+
+            if (unencryptedLogin.attachments && attachments) {
+                login.attachments = {};
+                for (var i = 0; i < unencryptedLogin.attachments.length; i++) {
+                    login.attachments[unencryptedLogin.attachments[i].id] =
+                        cryptoService.encrypt(unencryptedLogin.attachments[i].fileName, key);
+                }
+            }
+
+            return login;
+        };
+
+        _service.encryptAttachmentFile = function (key, unencryptedFile) {
+            var deferred = $q.defer();
+
+            if (unencryptedFile.size > 104857600) { // 100 MB
+                deferred.reject('Maximum file size is 100 MB.');
+                return;
+            }
+
+            var reader = new FileReader();
+            reader.readAsArrayBuffer(unencryptedFile);
+            reader.onload = function (evt) {
+                cryptoService.encryptToBytes(evt.target.result, key).then(function (encData) {
+                    deferred.resolve({
+                        fileName: cryptoService.encrypt(unencryptedFile.name, key),
+                        data: new Uint8Array(encData),
+                        size: unencryptedFile.size
+                    });
+                });
+            };
+            reader.onerror = function (evt) {
+                deferred.reject('Error reading file.');
+            };
+
+            return deferred.promise;
         };
 
         _service.encryptFolders = function (unencryptedFolders, key) {
@@ -205,56 +312,5 @@ angular
             };
         };
 
-        _service.updateKey = function (masterPasswordHash, success, error) {
-            var madeEncKey = cryptoService.makeEncKey(null);
-            encKey = madeEncKey.encKey;
-            var encKeyEnc = madeEncKey.encKeyEnc;
-
-            var reencryptedLogins = [];
-            var loginsPromise = apiService.logins.list({}, function (encryptedLogins) {
-                var filteredEncryptedLogins = [];
-                for (var i = 0; i < encryptedLogins.Data.length; i++) {
-                    if (encryptedLogins.Data[i].OrganizationId) {
-                        continue;
-                    }
-
-                    filteredEncryptedLogins.push(encryptedLogins.Data[i]);
-                }
-
-                var unencryptedLogins = _service.decryptLogins(filteredEncryptedLogins);
-                reencryptedLogins = _service.encryptLogins(unencryptedLogins, encKey);
-            }).$promise;
-
-            var reencryptedFolders = [];
-            var foldersPromise = apiService.folders.list({}, function (encryptedFolders) {
-                var unencryptedFolders = _service.decryptFolders(encryptedFolders.Data);
-                reencryptedFolders = _service.encryptFolders(unencryptedFolders, encKey);
-            }).$promise;
-
-            var privateKey = cryptoService.getPrivateKey('raw'),
-                reencryptedPrivateKey = null;
-            if (privateKey) {
-                reencryptedPrivateKey = cryptoService.encrypt(privateKey, encKey, 'raw');
-            }
-
-            return $q.all([loginsPromise, foldersPromise]).then(function () {
-                var request = {
-                    masterPasswordHash: masterPasswordHash,
-                    ciphers: reencryptedLogins,
-                    folders: reencryptedFolders,
-                    privateKey: reencryptedPrivateKey,
-                    key: encKeyEnc
-                };
-
-                return apiService.accounts.putKey(request).$promise;
-            }, error).then(function () {
-                cryptoService.setEncKey(encKey, null, true);
-                return success();
-            }, function () {
-                cryptoService.clearEncKey();
-                error();
-            });
-        };
-
         return _service;
     });

src/app/services/cryptoService.js

@@ -1,14 +1,16 @@
 angular
     .module('bit.services')
 
-    .factory('cryptoService', function ($sessionStorage, constants, $q) {
+    .factory('cryptoService', function ($sessionStorage, constants, $q, $window) {
         var _service = {},
             _key,
             _encKey,
             _legacyEtmKey,
             _orgKeys,
             _privateKey,
-            _publicKey;
+            _publicKey,
+            _crypto = typeof $window.crypto != 'undefined' ? $window.crypto : null,
+            _subtle = (!!_crypto && typeof $window.crypto.subtle != 'undefined') ? $window.crypto.subtle : null;
 
         _service.setKey = function (key) {
             _key = key;
@@ -233,9 +235,18 @@ angular
         };
 
         _service.makeKey = function (password, salt) {
-            var keyBytes = forge.pbkdf2(forge.util.encodeUtf8(password), forge.util.encodeUtf8(salt),
-                5000, 256 / 8, 'sha256');
-            return new SymmetricCryptoKey(keyBytes);
+            if (!$window.cryptoShimmed && $window.navigator.userAgent.indexOf('Edge') === -1) {
+                return pbkdf2WC(password, salt, 5000, 256).then(function (keyBuf) {
+                    return new SymmetricCryptoKey(bufToB64(keyBuf), true);
+                });
+            }
+            else {
+                var deferred = $q.defer();
+                var keyBytes = forge.pbkdf2(forge.util.encodeUtf8(password), forge.util.encodeUtf8(salt),
+                    5000, 256 / 8, 'sha256');
+                deferred.resolve(new SymmetricCryptoKey(keyBytes));
+                return deferred.promise;
+            }
         };
 
         _service.makeEncKey = function (key) {
@@ -278,7 +289,7 @@ angular
         };
 
         _service.makeShareKeyCt = function () {
-            return _service.rsaEncrypt(forge.random.getBytesSync(512 / 8));
+            return _service.rsaEncryptMe(forge.random.getBytesSync(512 / 8));
         };
 
         _service.hashPassword = function (password, key) {
@@ -290,11 +301,84 @@ angular
                 throw 'Invalid parameters.';
             }
 
-            var hashBits = forge.pbkdf2(key.key, forge.util.encodeUtf8(password), 1, 256 / 8, 'sha256');
-            return forge.util.encode64(hashBits);
+            if (!$window.cryptoShimmed && $window.navigator.userAgent.indexOf('Edge') === -1) {
+                var keyBuf = key.getBuffers();
+                return pbkdf2WC(new Uint8Array(keyBuf.key), password, 1, 256).then(function (hashBuf) {
+                    return bufToB64(hashBuf);
+                });
+            }
+            else {
+                var deferred = $q.defer();
+                var hashBits = forge.pbkdf2(key.key, forge.util.encodeUtf8(password), 1, 256 / 8, 'sha256');
+                deferred.resolve(forge.util.encode64(hashBits));
+                return deferred.promise;
+            }
+        };
+
+        function pbkdf2WC(password, salt, iterations, size) {
+            password = typeof (password) === 'string' ? utf8ToArray(password) : password;
+            salt = typeof (salt) === 'string' ? utf8ToArray(salt) : salt;
+
+            return _subtle.importKey('raw', password.buffer, { name: 'PBKDF2' }, false, ['deriveKey', 'deriveBits'])
+                .then(function (importedKey) {
+                    return _subtle.deriveKey(
+                        { name: 'PBKDF2', salt: salt.buffer, iterations: iterations, hash: { name: 'SHA-256' } },
+                        importedKey, { name: 'AES-CBC', length: size }, true, ['encrypt', 'decrypt']);
+                }).then(function (derivedKey) {
+                    return _subtle.exportKey('raw', derivedKey);
+                });
+        }
+
+        _service.makeKeyAndHash = function (email, password) {
+            email = email.toLowerCase();
+            var key;
+            return _service.makeKey(password, email).then(function (theKey) {
+                key = theKey;
+                return _service.hashPassword(password, theKey);
+            }).then(function (theHash) {
+                return {
+                    key: key,
+                    hash: theHash
+                };
+            });
         };
 
         _service.encrypt = function (plainValue, key, plainValueEncoding) {
+            var encValue = aesEncrypt(plainValue, key, plainValueEncoding);
+
+            var iv = forge.util.encode64(encValue.iv);
+            var ct = forge.util.encode64(encValue.ct);
+            var cipherString = iv + '|' + ct;
+
+            if (encValue.mac) {
+                var mac = forge.util.encode64(encValue.mac);
+                cipherString = cipherString + '|' + mac;
+            }
+
+            return encValue.key.encType + '.' + cipherString;
+        };
+
+        _service.encryptToBytes = function (plainValue, key) {
+            return aesEncryptWC(plainValue, key).then(function (encValue) {
+                var macLen = 0;
+                if (encValue.mac) {
+                    macLen = encValue.mac.length;
+                }
+
+                var encBytes = new Uint8Array(1 + encValue.iv.length + macLen + encValue.ct.length);
+
+                encBytes.set([encValue.key.encType]);
+                encBytes.set(encValue.iv, 1);
+                if (encValue.mac) {
+                    encBytes.set(encValue.mac, 1 + encValue.iv.length);
+                }
+                encBytes.set(encValue.ct, 1 + encValue.iv.length + macLen);
+
+                return encBytes.buffer;
+            });
+        };
+
+        function aesEncrypt(plainValue, key, plainValueEncoding) {
             key = key || _service.getEncKey() || _service.getKey();
 
             if (!key) {
@@ -309,20 +393,61 @@ angular
             cipher.update(buffer);
             cipher.finish();
 
-            var iv = forge.util.encode64(ivBytes);
             var ctBytes = cipher.output.getBytes();
-            var ct = forge.util.encode64(ctBytes);
-            var cipherString = iv + '|' + ct;
 
+            var macBytes = null;
             if (key.macKey) {
-                var mac = computeMac(ctBytes, ivBytes, key.macKey, true);
-                cipherString = cipherString + '|' + mac;
+                macBytes = computeMac(ivBytes + ctBytes, key.macKey, false);
             }
 
-            return key.encType + '.' + cipherString;
-        };
+            return {
+                iv: ivBytes,
+                ct: ctBytes,
+                mac: macBytes,
+                key: key,
+                plainValueEncoding: plainValueEncoding
+            };
+        }
 
-        _service.rsaEncrypt = function (plainValue, publicKey) {
+        function aesEncryptWC(plainValue, key) {
+            key = key || _service.getEncKey() || _service.getKey();
+
+            if (!key) {
+                throw 'Encryption key unavailable.';
+            }
+
+            var obj = {
+                iv: new Uint8Array(16),
+                ct: null,
+                mac: null,
+                key: key
+            };
+
+            var keyBuf = key.getBuffers();
+            _crypto.getRandomValues(obj.iv);
+
+            return _subtle.importKey('raw', keyBuf.encKey, { name: 'AES-CBC' }, false, ['encrypt'])
+                .then(function (encKey) {
+                    return _subtle.encrypt({ name: 'AES-CBC', iv: obj.iv }, encKey, plainValue);
+                }).then(function (encValue) {
+                    obj.ct = new Uint8Array(encValue);
+                    if (!keyBuf.macKey) {
+                        return null;
+                    }
+
+                    var data = new Uint8Array(obj.iv.length + obj.ct.length);
+                    data.set(obj.iv, 0);
+                    data.set(obj.ct, obj.iv.length);
+                    return computeMacWC(data.buffer, keyBuf.macKey);
+                }).then(function (mac) {
+                    if (mac) {
+                        obj.mac = new Uint8Array(mac);
+                    }
+                    return obj;
+                });
+        }
+
+        _service.rsaEncrypt = function (plainValue, publicKey, key) {
             publicKey = publicKey || _service.getPublicKey();
             if (!publicKey) {
                 throw 'Public key unavailable.';
@@ -336,18 +461,214 @@ angular
             var encryptedBytes = publicKey.encrypt(plainValue, 'RSA-OAEP', {
                 md: forge.md.sha1.create()
             });
+            var cipherString = forge.util.encode64(encryptedBytes);
 
-            return constants.encType.Rsa2048_OaepSha1_B64 + '.' + forge.util.encode64(encryptedBytes);
+            if (key && key.macKey) {
+                var mac = computeMac(encryptedBytes, key.macKey, true);
+                return constants.encType.Rsa2048_OaepSha1_HmacSha256_B64 + '.' + cipherString + '|' + mac;
+            }
+            else {
+                return constants.encType.Rsa2048_OaepSha1_B64 + '.' + cipherString;
+            }
+        };
+
+        _service.rsaEncryptMe = function (plainValue) {
+            return _service.rsaEncrypt(plainValue, _service.getPublicKey(), _service.getEncKey());
         };
 
         _service.decrypt = function (encValue, key, outputEncoding) {
+            try {
+                key = key || _service.getEncKey() || _service.getKey();
+
+                var headerPieces = encValue.split('.'),
+                    encType,
+                    encPieces;
+
+                if (headerPieces.length === 2) {
+                    try {
+                        encType = parseInt(headerPieces[0]);
+                        encPieces = headerPieces[1].split('|');
+                    }
+                    catch (e) {
+                        console.error('Cannot parse headerPieces.');
+                        return null;
+                    }
+                }
+                else {
+                    encPieces = encValue.split('|');
+                    encType = encPieces.length === 3 ? constants.encType.AesCbc128_HmacSha256_B64 :
+                        constants.encType.AesCbc256_B64;
+                }
+
+                if (encType === constants.encType.AesCbc128_HmacSha256_B64 && key.encType === constants.encType.AesCbc256_B64) {
+                    // Old encrypt-then-mac scheme, swap out the key
+                    _legacyEtmKey = _legacyEtmKey ||
+                        new SymmetricCryptoKey(key.key, false, constants.encType.AesCbc128_HmacSha256_B64);
+                    key = _legacyEtmKey;
+                }
+
+                if (encType !== key.encType) {
+                    throw 'encType unavailable.';
+                }
+
+                switch (encType) {
+                    case constants.encType.AesCbc128_HmacSha256_B64:
+                    case constants.encType.AesCbc256_HmacSha256_B64:
+                        if (encPieces.length !== 3) {
+                            console.error('Enc type (' + encType + ') not valid.');
+                            return null;
+                        }
+                        break;
+                    case constants.encType.AesCbc256_B64:
+                        if (encPieces.length !== 2) {
+                            console.error('Enc type (' + encType + ') not valid.');
+                            return null;
+                        }
+                        break;
+                    default:
+                        console.error('Enc type (' + encType + ') not supported.');
+                        return null;
+                }
+
+                var ivBytes = forge.util.decode64(encPieces[0]);
+                var ctBytes = forge.util.decode64(encPieces[1]);
+
+                if (key.macKey && encPieces.length > 2) {
+                    var macBytes = forge.util.decode64(encPieces[2]);
+                    var computedMacBytes = computeMac(ivBytes + ctBytes, key.macKey, false);
+                    if (!macsEqual(key.macKey, macBytes, computedMacBytes)) {
+                        console.error('MAC failed.');
+                        return null;
+                    }
+                }
+
+                var ctBuffer = forge.util.createBuffer(ctBytes);
+                var decipher = forge.cipher.createDecipher('AES-CBC', key.encKey);
+                decipher.start({ iv: ivBytes });
+                decipher.update(ctBuffer);
+                decipher.finish();
+
+                outputEncoding = outputEncoding || 'utf8';
+                if (outputEncoding === 'utf8') {
+                    return decipher.output.toString('utf8');
+                }
+                else {
+                    return decipher.output.getBytes();
+                }
+            }
+            catch (e) {
+                console.error('Caught unhandled error in decrypt: ' + e);
+                throw e;
+            }
+        };
+
+        _service.decryptFromBytes = function (encBuf, key) {
+            try {
+                if (!encBuf) {
+                    throw 'no encBuf.';
+                }
+
+                var encBytes = new Uint8Array(encBuf),
+                    encType = encBytes[0],
+                    ctBytes = null,
+                    ivBytes = null,
+                    macBytes = null;
+
+                switch (encType) {
+                    case constants.encType.AesCbc128_HmacSha256_B64:
+                    case constants.encType.AesCbc256_HmacSha256_B64:
+                        if (encBytes.length <= 49) { // 1 + 16 + 32 + ctLength
+                            console.error('Enc type (' + encType + ') not valid.');
+                            return null;
+                        }
+
+                        ivBytes = slice(encBytes, 1, 17);
+                        macBytes = slice(encBytes, 17, 49);
+                        ctBytes = slice(encBytes, 49);
+                        break;
+                    case constants.encType.AesCbc256_B64:
+                        if (encBytes.length <= 17) { // 1 + 16 + ctLength
+                            console.error('Enc type (' + encType + ') not valid.');
+                            return null;
+                        }
+
+                        ivBytes = slice(encBytes, 1, 17);
+                        ctBytes = slice(encBytes, 17);
+                        break;
+                    default:
+                        console.error('Enc type (' + encType + ') not supported.');
+                        return null;
+                }
+
+                return aesDecryptWC(
+                    encType,
+                    ctBytes.buffer,
+                    ivBytes.buffer,
+                    macBytes ? macBytes.buffer : null,
+                    key);
+            }
+            catch (e) {
+                console.error('Caught unhandled error in decryptFromBytes: ' + e);
+                throw e;
+            }
+        };
+
+        function aesDecryptWC(encType, ctBuf, ivBuf, macBuf, key) {
             key = key || _service.getEncKey() || _service.getKey();
+            if (!key) {
+                throw 'Encryption key unavailable.';
+            }
+
+            if (encType !== key.encType) {
+                throw 'encType unavailable.';
+            }
+
+            var keyBuf = key.getBuffers(),
+                encKey = null;
+
+            return _subtle.importKey('raw', keyBuf.encKey, { name: 'AES-CBC' }, false, ['decrypt'])
+                .then(function (theEncKey) {
+                    encKey = theEncKey;
+
+                    if (!key.macKey || !macBuf) {
+                        return null;
+                    }
+
+                    var data = new Uint8Array(ivBuf.byteLength + ctBuf.byteLength);
+                    data.set(new Uint8Array(ivBuf), 0);
+                    data.set(new Uint8Array(ctBuf), ivBuf.byteLength);
+                    return computeMacWC(data.buffer, keyBuf.macKey);
+                }).then(function (computedMacBuf) {
+                    if (computedMacBuf === null) {
+                        return null;
+                    }
+                    return macsEqualWC(keyBuf.macKey, macBuf, computedMacBuf);
+                }).then(function (macsMatch) {
+                    if (macsMatch === false) {
+                        console.error('MAC failed.');
+                        return null;
+                    }
+                    return _subtle.decrypt({ name: 'AES-CBC', iv: ivBuf }, encKey, ctBuf);
+                });
+        }
+
+        _service.rsaDecrypt = function (encValue, privateKey, key) {
+            privateKey = privateKey || _service.getPrivateKey();
+            key = key || _service.getEncKey();
+
+            if (!privateKey) {
+                throw 'Private key unavailable.';
+            }
 
             var headerPieces = encValue.split('.'),
                 encType,
                 encPieces;
 
-            if (headerPieces.length === 2) {
+            if (headerPieces.length === 1) {
+                encType = constants.encType.Rsa2048_OaepSha256_B64;
+                encPieces = [headerPieces[0]];
+            }
+            else if (headerPieces.length === 2) {
                 try {
                     encType = parseInt(headerPieces[0]);
                     encPieces = headerPieces[1].split('|');
@@ -356,35 +677,16 @@ angular
                     return null;
                 }
             }
-            else {
-                encPieces = encValue.split('|');
-                encType = encPieces.length === 3 ? constants.encType.AesCbc128_HmacSha256_B64 :
-                    constants.encType.AesCbc256_B64;
-            }
-
-            if (encType === constants.encType.AesCbc128_HmacSha256_B64 && key.encType === constants.encType.AesCbc256_B64) {
-                // Old encrypt-then-mac scheme, swap out the key
-                _legacyEtmKey = _legacyEtmKey ||
-                    new SymmetricCryptoKey(key.key, false, constants.encType.AesCbc128_HmacSha256_B64);
-                key = _legacyEtmKey;
-            }
-
-            if (encType !== key.encType) {
-                throw 'encType unavailable.';
-            }
 
             switch (encType) {
-                case constants.encType.AesCbc128_HmacSha256_B64:
-                    if (encPieces.length !== 3) {
+                case constants.encType.Rsa2048_OaepSha256_B64:
+                case constants.encType.Rsa2048_OaepSha1_B64:
+                    if (encPieces.length !== 1) {
                         return null;
                     }
                     break;
-                case constants.encType.AesCbc256_HmacSha256_B64:
-                    if (encPieces.length !== 3) {
-                        return null;
-                    }
-                    break;
-                case constants.encType.AesCbc256_B64:
+                case constants.encType.Rsa2048_OaepSha256_HmacSha256_B64:
+                case constants.encType.Rsa2048_OaepSha1_HmacSha256_B64:
                     if (encPieces.length !== 2) {
                         return null;
                     }
@@ -393,64 +695,24 @@ angular
                     return null;
             }
 
-            var ivBytes = forge.util.decode64(encPieces[0]);
-            var ctBytes = forge.util.decode64(encPieces[1]);
+            var ctBytes = forge.util.decode64(encPieces[0]);
 
-            if (key.macKey && encPieces.length > 2) {
-                var macBytes = forge.util.decode64(encPieces[2]);
-                var computedMacBytes = computeMac(ctBytes, ivBytes, key.macKey, false);
+            if (key && key.macKey && encPieces.length > 1) {
+                var macBytes = forge.util.decode64(encPieces[1]);
+                var computedMacBytes = computeMac(ctBytes, key.macKey, false);
                 if (!macsEqual(key.macKey, macBytes, computedMacBytes)) {
                     console.error('MAC failed.');
                     return null;
                 }
             }
 
-            var ctBuffer = forge.util.createBuffer(ctBytes);
-            var decipher = forge.cipher.createDecipher('AES-CBC', key.encKey);
-            decipher.start({ iv: ivBytes });
-            decipher.update(ctBuffer);
-            decipher.finish();
-
-            outputEncoding = outputEncoding || 'utf8';
-            if (outputEncoding === 'utf8') {
-                return decipher.output.toString('utf8');
-            }
-            else {
-                return decipher.output.getBytes();
-            }
-        };
-
-        _service.rsaDecrypt = function (encValue, privateKey) {
-            privateKey = privateKey || _service.getPrivateKey();
-            if (!privateKey) {
-                throw 'Private key unavailable.';
-            }
-
-            var headerPieces = encValue.split('.'),
-                encType,
-                encPiece;
-
-            if (headerPieces.length === 1) {
-                encType = constants.encType.Rsa2048_OaepSha256_B64;
-                encPiece = headerPieces[0];
-            }
-            else if (headerPieces.length === 2) {
-                try {
-                    encType = parseInt(headerPieces[0]);
-                    encPiece = headerPieces[1];
-                }
-                catch (e) {
-                    return null;
-                }
-            }
-
-            var ctBytes = forge.util.decode64(encPiece);
             var md;
-
-            if (encType === constants.encType.Rsa2048_OaepSha256_B64) {
+            if (encType === constants.encType.Rsa2048_OaepSha256_B64 ||
+                encType === constants.encType.Rsa2048_OaepSha256_HmacSha256_B64) {
                 md = forge.md.sha256.create();
             }
-            else if (encType === constants.encType.Rsa2048_OaepSha1_B64) {
+            else if (encType === constants.encType.Rsa2048_OaepSha1_B64 ||
+                encType === constants.encType.Rsa2048_OaepSha1_HmacSha256_B64) {
                 md = forge.md.sha1.create();
             }
             else {
@@ -464,14 +726,21 @@ angular
             return decBytes;
         };
 
-        function computeMac(ct, iv, macKey, b64Output) {
+        function computeMac(dataBytes, macKey, b64Output) {
             var hmac = forge.hmac.create();
             hmac.start('sha256', macKey);
-            hmac.update(iv + ct);
+            hmac.update(dataBytes);
             var mac = hmac.digest();
             return b64Output ? forge.util.encode64(mac.getBytes()) : mac.getBytes();
         }
 
+        function computeMacWC(dataBuf, macKeyBuf) {
+            return _subtle.importKey('raw', macKeyBuf, { name: 'HMAC', hash: { name: 'SHA-256' } }, false, ['sign'])
+                .then(function (key) {
+                    return _subtle.sign({ name: 'HMAC', hash: { name: 'SHA-256' } }, key, dataBuf);
+                });
+        }
+
         // Safely compare two MACs in a way that protects against timing attacks (Double HMAC Verification).
         // ref: https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2011/february/double-hmac-verification/
         function macsEqual(macKey, mac1, mac2) {
@@ -488,6 +757,35 @@ angular
             return mac1 === mac2;
         }
 
+        function macsEqualWC(macKeyBuf, mac1Buf, mac2Buf) {
+            var mac1,
+                macKey;
+
+            return window.crypto.subtle.importKey('raw', macKeyBuf, { name: 'HMAC', hash: { name: 'SHA-256' } }, false, ['sign'])
+                .then(function (key) {
+                    macKey = key;
+                    return window.crypto.subtle.sign({ name: 'HMAC', hash: { name: 'SHA-256' } }, macKey, mac1Buf);
+                }).then(function (mac) {
+                    mac1 = mac;
+                    return window.crypto.subtle.sign({ name: 'HMAC', hash: { name: 'SHA-256' } }, macKey, mac2Buf);
+                }).then(function (mac2) {
+                    if (mac1.byteLength !== mac2.byteLength) {
+                        return false;
+                    }
+
+                    var arr1 = new Uint8Array(mac1);
+                    var arr2 = new Uint8Array(mac2);
+
+                    for (var i = 0; i < arr2.length; i++) {
+                        if (arr1[i] !== arr2[i]) {
+                            return false;
+                        }
+                    }
+
+                    return true;
+                });
+        }
+
         function SymmetricCryptoKey(keyBytes, b64KeyBytes, encType) {
             if (b64KeyBytes) {
                 keyBytes = forge.util.decode64(keyBytes);
@@ -536,5 +834,99 @@ angular
             }
         }
 
+        SymmetricCryptoKey.prototype.getBuffers = function () {
+            if (this.keyBuf) {
+                return this.keyBuf;
+            }
+
+            var key = b64ToArray(this.keyB64);
+
+            var keys = {
+                key: key.buffer
+            };
+
+            if (this.macKey) {
+                keys.encKey = slice(key, 0, key.length / 2).buffer;
+                keys.macKey = slice(key, key.length / 2).buffer;
+            }
+            else {
+                keys.encKey = key.buffer;
+                keys.macKey = null;
+            }
+
+            this.keyBuf = keys;
+            return this.keyBuf;
+        };
+
+        function b64ToArray(b64Str) {
+            var binaryString = $window.atob(b64Str);
+            var arr = new Uint8Array(binaryString.length);
+            for (var i = 0; i < binaryString.length; i++) {
+                arr[i] = binaryString.charCodeAt(i);
+            }
+            return arr;
+        }
+
+        function bufToB64(buf) {
+            var binary = '';
+            var bytes = new Uint8Array(buf);
+            for (var i = 0; i < bytes.byteLength; i++) {
+                binary += String.fromCharCode(bytes[i]);
+            }
+            return $window.btoa(binary);
+        }
+
+        function utf8ToArray(str) {
+            var utf8Str = unescape(encodeURIComponent(str));
+            var arr = new Uint8Array(utf8Str.length);
+            for (var i = 0; i < utf8Str.length; i++) {
+                arr[i] = utf8Str.charCodeAt(i);
+            }
+            return arr;
+        }
+
+        function slice(arr, begin, end) {
+            if (arr.slice) {
+                return arr.slice(begin, end);
+            }
+
+            // shim for IE
+            // ref: https://stackoverflow.com/a/21440217
+
+            arr = arr.buffer;
+            if (begin === void 0) {
+                begin = 0;
+            }
+
+            if (end === void 0) {
+                end = arr.byteLength;
+            }
+
+            begin = Math.floor(begin);
+            end = Math.floor(end);
+
+            if (begin < 0) {
+                begin += arr.byteLength;
+            }
+
+            if (end < 0) {
+                end += arr.byteLength;
+            }
+
+            begin = Math.min(Math.max(0, begin), arr.byteLength);
+            end = Math.min(Math.max(0, end), arr.byteLength);
+
+            if (end - begin <= 0) {
+                return new ArrayBuffer(0);
+            }
+
+            var result = new ArrayBuffer(end - begin);
+            var resultBytes = new Uint8Array(result);
+            var sourceBytes = new Uint8Array(arr, begin, end - begin);
+
+            resultBytes.set(sourceBytes);
+            return new Uint8Array(result);
+        }
+
         return _service;
     });

src/app/services/importService.js

@@ -100,6 +100,9 @@
                 case 'passkeepcsv':
                     importPassKeepCsv(file, success, error);
                     break;
+                case 'gnomejson':
+                    importGnomeJson(file, success, error);
+                    break;
                 default:
                     error();
                     break;
@@ -246,6 +249,7 @@
                             password: value.password && value.password !== '' ? value.password : null,
                             notes: value.notes && value.notes !== '' ? value.notes : null,
                             name: value.name && value.name !== '' ? value.name : '--',
+                            totp: value.totp && value.totp !== '' ? value.totp : null
                         });
 
                         if (addFolder) {
@@ -2453,5 +2457,76 @@
             });
         }
 
+        function importGnomeJson(file, success, error) {
+            var folders = [],
+                logins = [],
+                loginRelationships = [],
+                i = 0;
+
+            getFileContents(file, parseJson, error);
+
+            function parseJson(fileContent) {
+                var fileJson = JSON.parse(fileContent);
+                var folderIndex = 0;
+                var loginIndex = 0;
+
+                if (fileJson && Object.keys(fileJson).length) {
+                    for (var keyRing in fileJson) {
+                        if (fileJson.hasOwnProperty(keyRing) && fileJson[keyRing].length) {
+                            folderIndex = folders.length;
+                            folders.push({
+                                name: keyRing
+                            });
+
+                            for (i = 0; i < fileJson[keyRing].length; i++) {
+                                var item = fileJson[keyRing][i];
+                                if (!item.display_name || item.display_name.indexOf('http') !== 0) {
+                                    continue;
+                                }
+
+                                loginIndex = logins.length;
+
+                                var login = {
+                                    favorite: false,
+                                    uri: fixUri(item.display_name),
+                                    username: item.attributes.username_value && item.attributes.username_value !== '' ?
+                                        item.attributes.username_value : null,
+                                    password: item.secret && item.secret !== '' ? item.secret : null,
+                                    notes: '',
+                                    name: item.display_name.replace('http://', '').replace('https://', ''),
+                                };
+
+                                if (login.name > 30) {
+                                    login.name = login.name.substring(0, 30);
+                                }
+
+                                for (var attr in item.attributes) {
+                                    if (item.attributes.hasOwnProperty(attr) && attr !== 'username_value' &&
+                                        attr !== 'xdg:schema') {
+                                        if (login.notes !== '') {
+                                            login.notes += '\n';
+                                        }
+                                        login.notes += (attr + ': ' + item.attributes[attr]);
+                                    }
+                                }
+
+                                if (login.notes === '') {
+                                    login.notes = null;
+                                }
+
+                                logins.push(login);
+                                loginRelationships.push({
+                                    key: loginIndex,
+                                    value: folderIndex
+                                });
+                            }
+                        }
+                    }
+                }
+
+                success(folders, logins, loginRelationships);
+            }
+        }
+
         return _service;
     });

src/app/services/tokenService.js

@@ -1,7 +1,7 @@
 angular
     .module('bit.services')
 
-    .factory('tokenService', function ($sessionStorage, jwtHelper) {
+    .factory('tokenService', function ($sessionStorage, $localStorage, jwtHelper) {
         var _service = {},
             _token = null,
             _refreshToken = null;
@@ -42,6 +42,33 @@ angular
             delete $sessionStorage.refreshToken;
         };
 
+        _service.setTwoFactorToken = function (token, email) {
+            if (!$localStorage.twoFactor) {
+                $localStorage.twoFactor = {};
+            }
+            $localStorage.twoFactor[email] = token;
+        };
+
+        _service.getTwoFactorToken = function (email) {
+            return $localStorage.twoFactor ? $localStorage.twoFactor[email] : null;
+        };
+
+        _service.clearTwoFactorToken = function (email) {
+            if (email) {
+                if ($localStorage.twoFactor && $localStorage.twoFactor[email]) {
+                    delete $localStorage.twoFactor[email];
+                }
+            }
+            else {
+                delete $localStorage.twoFactor;
+            }
+        };
+
+        _service.clearTokens = function () {
+            _service.clearToken();
+            _service.clearRefreshToken();
+        };
+
         _service.tokenSecondsRemaining = function (token, offsetSeconds) {
             var d = jwtHelper.getTokenExpirationDate(token);
             offsetSeconds = offsetSeconds || 0;

src/app/settings.js

@@ -1,2 +1,2 @@
 angular.module("bit")
-.constant("appSettings", {"apiUri":"https://api.bitwarden.com","identityUri":"https://identity.bitwarden.com","stripeKey":"pk_live_bpN0P37nMxrMQkcaHXtAybJk","version":"1.13.0","environment":"Production"});
+.constant("appSettings", {"apiUri":"https://api.bitwarden.com","identityUri":"https://identity.bitwarden.com","stripeKey":"pk_live_bpN0P37nMxrMQkcaHXtAybJk","braintreeKey":"TODO","version":"1.14.2","environment":"Production"});

src/app/settings/settingsBillingAdjustStorageController.js

@@ -0,0 +1,37 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsBillingAdjustStorageController', function ($scope, $state, $uibModalInstance, apiService,
+        $analytics, toastr, add) {
+        $analytics.eventTrack('settingsBillingAdjustStorageController', { category: 'Modal' });
+        $scope.add = add;
+        $scope.storageAdjustment = 0;
+
+        $scope.submit = function () {
+            var request = {
+                storageGbAdjustment: $scope.storageAdjustment
+            };
+
+            if (!add) {
+                request.storageGbAdjustment *= -1;
+            }
+
+            $scope.submitPromise = apiService.accounts.putStorage(null, request)
+                .$promise.then(function (response) {
+                    if (add) {
+                        $analytics.eventTrack('Added Storage');
+                        toastr.success('You have added ' + $scope.storageAdjustment + ' GB.');
+                    }
+                    else {
+                        $analytics.eventTrack('Removed Storage');
+                        toastr.success('You have removed ' + $scope.storageAdjustment + ' GB.');
+                    }
+
+                    $uibModalInstance.close();
+                });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/settings/settingsBillingChangePaymentController.js

@@ -0,0 +1,94 @@
+angular
+    .module('bit.organization')
+
+    .controller('settingsBillingChangePaymentController', function ($scope, $state, $uibModalInstance, apiService, stripe,
+        $analytics, toastr, existingPaymentMethod, appSettings, $timeout) {
+        $analytics.eventTrack('settingsBillingChangePaymentController', { category: 'Modal' });
+        $scope.existingPaymentMethod = existingPaymentMethod;
+        $scope.paymentMethod = 'card';
+        $scope.dropinLoaded = false;
+        $scope.showPaymentOptions = false;
+        $scope.card = {};
+        var btInstance = null;
+
+        $scope.changePaymentMethod = function (val) {
+            $scope.paymentMethod = val;
+            if ($scope.paymentMethod !== 'paypal') {
+                return;
+            }
+
+            braintree.dropin.create({
+                authorization: appSettings.braintreeKey,
+                container: '#bt-dropin-container',
+                paymentOptionPriority: ['paypal'],
+                paypal: {
+                    flow: 'vault',
+                    buttonStyle: {
+                        label: 'pay',
+                        size: 'medium',
+                        shape: 'pill',
+                        color: 'blue'
+                    }
+                }
+            }, function (createErr, instance) {
+                if (createErr) {
+                    console.error(createErr);
+                    return;
+                }
+
+                btInstance = instance;
+                $timeout(function () {
+                    $scope.dropinLoaded = true;
+                });
+            });
+        };
+
+        $scope.submit = function () {
+            $scope.submitPromise = getPaymentToken($scope.card).then(function (token) {
+                if (!token) {
+                    throw 'No payment token.';
+                }
+
+                var request = {
+                    paymentToken: token
+                };
+
+                return apiService.accounts.putPayment(null, request).$promise;
+            }, function (err) {
+                throw err;
+            }).then(function (response) {
+                $scope.card = null;
+                if (existingPaymentMethod) {
+                    $analytics.eventTrack('Changed Payment Method');
+                    toastr.success('You have changed your payment method.');
+                }
+                else {
+                    $analytics.eventTrack('Added Payment Method');
+                    toastr.success('You have added a payment method.');
+                }
+
+                $uibModalInstance.close();
+            });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+
+        function getPaymentToken(card) {
+            if ($scope.paymentMethod === 'paypal') {
+                return btInstance.requestPaymentMethod().then(function (payload) {
+                    return payload.nonce;
+                }).catch(function (err) {
+                    throw err.message;
+                });
+            }
+            else {
+                return stripe.card.createToken(card).then(function (response) {
+                    return response.id;
+                }).catch(function (err) {
+                    throw err.message;
+                });
+            }
+        }
+    });

src/app/settings/settingsBillingController.js

@@ -0,0 +1,163 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsBillingController', function ($scope, apiService, authService, $state, $uibModal, toastr, $analytics) {
+        $scope.charges = [];
+        $scope.paymentSource = null;
+        $scope.subscription = null;
+        $scope.loading = true;
+
+        $scope.$on('$viewContentLoaded', function () {
+            load();
+        });
+
+        $scope.changePayment = function () {
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/settings/views/settingsBillingChangePayment.html',
+                controller: 'settingsBillingChangePaymentController',
+                resolve: {
+                    existingPaymentMethod: function () {
+                        return $scope.paymentSource ? $scope.paymentSource.description : null;
+                    }
+                }
+            });
+
+            modal.result.then(function () {
+                load();
+            });
+        };
+
+        $scope.adjustStorage = function (add) {
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/settings/views/settingsBillingAdjustStorage.html',
+                controller: 'settingsBillingAdjustStorageController',
+                resolve: {
+                    add: function () {
+                        return add;
+                    }
+                }
+            });
+
+            modal.result.then(function () {
+                load();
+            });
+        };
+
+        $scope.cancel = function () {
+            if (!confirm('Are you sure you want to cancel? You will lose access to all premium features at the end ' +
+                'of this billing cycle.')) {
+                return;
+            }
+
+            apiService.accounts.putCancelPremium({}, {})
+                .$promise.then(function (response) {
+                    $analytics.eventTrack('Canceled Premium');
+                    toastr.success('Premium subscription has been canceled.');
+                    load();
+                });
+        };
+
+        $scope.reinstate = function () {
+            if (!confirm('Are you sure you want to remove the cancellation request and reinstate your premium membership?')) {
+                return;
+            }
+
+            apiService.accounts.putReinstatePremium({}, {})
+                .$promise.then(function (response) {
+                    $analytics.eventTrack('Reinstated Premium');
+                    toastr.success('Premium cancellation request has been removed.');
+                    load();
+                });
+        };
+
+        function load() {
+            authService.getUserProfile().then(function (profile) {
+                $scope.premium = profile.premium;
+                if (!profile.premium) {
+                    return null;
+                }
+
+                return apiService.accounts.getBilling({}).$promise;
+            }).then(function (billing) {
+                if (!billing) {
+                    return $state.go('backend.user.settingsPremium');
+                }
+
+                var i = 0;
+
+                $scope.storage = null;
+                if (billing && billing.MaxStorageGb) {
+                    $scope.storage = {
+                        currentGb: billing.StorageGb || 0,
+                        maxGb: billing.MaxStorageGb,
+                        currentName: billing.StorageName || '0 GB'
+                    };
+
+                    $scope.storage.percentage = +(100 * ($scope.storage.currentGb / $scope.storage.maxGb)).toFixed(2);
+                }
+
+                $scope.subscription = null;
+                if (billing && billing.Subscription) {
+                    $scope.subscription = {
+                        trialEndDate: billing.Subscription.TrialEndDate,
+                        cancelledDate: billing.Subscription.CancelledDate,
+                        status: billing.Subscription.Status,
+                        cancelled: billing.Subscription.Cancelled,
+                        markedForCancel: !billing.Subscription.Cancelled && billing.Subscription.CancelAtEndDate
+                    };
+                }
+
+                $scope.nextInvoice = null;
+                if (billing && billing.UpcomingInvoice) {
+                    $scope.nextInvoice = {
+                        date: billing.UpcomingInvoice.Date,
+                        amount: billing.UpcomingInvoice.Amount
+                    };
+                }
+
+                if (billing && billing.Subscription && billing.Subscription.Items) {
+                    $scope.subscription.items = [];
+                    for (i = 0; i < billing.Subscription.Items.length; i++) {
+                        $scope.subscription.items.push({
+                            amount: billing.Subscription.Items[i].Amount,
+                            name: billing.Subscription.Items[i].Name,
+                            interval: billing.Subscription.Items[i].Interval,
+                            qty: billing.Subscription.Items[i].Quantity
+                        });
+                    }
+                }
+
+                $scope.paymentSource = null;
+                if (billing && billing.PaymentSource) {
+                    $scope.paymentSource = {
+                        type: billing.PaymentSource.Type,
+                        description: billing.PaymentSource.Description,
+                        cardBrand: billing.PaymentSource.CardBrand
+                    };
+                }
+
+                var charges = [];
+                if (billing && billing.Charges) {
+                    for (i = 0; i < billing.Charges.length; i++) {
+                        charges.push({
+                            date: billing.Charges[i].CreatedDate,
+                            paymentSource: billing.Charges[i].PaymentSource ?
+                                billing.Charges[i].PaymentSource.Description : '-',
+                            amount: billing.Charges[i].Amount,
+                            status: billing.Charges[i].Status,
+                            failureMessage: billing.Charges[i].FailureMessage,
+                            refunded: billing.Charges[i].Refunded,
+                            partiallyRefunded: billing.Charges[i].PartiallyRefunded,
+                            refundedAmount: billing.Charges[i].RefundedAmount,
+                            invoiceId: billing.Charges[i].InvoiceId
+                        });
+                    }
+                }
+                $scope.charges = charges;
+
+                $scope.loading = false;
+            });
+        }
+    });

src/app/settings/settingsChangeEmailController.js

@@ -2,71 +2,61 @@
     .module('bit.settings')
 
     .controller('settingsChangeEmailController', function ($scope, $state, apiService, $uibModalInstance, cryptoService,
-        cipherService, authService, $q, toastr, $analytics) {
+        authService, toastr, $analytics, validationService) {
         $analytics.eventTrack('settingsChangeEmailController', { category: 'Modal' });
 
         var _masterPasswordHash,
             _masterPassword,
             _newEmail;
 
-        $scope.token = function (model) {
+        $scope.token = function (model, form) {
+            var encKey = cryptoService.getEncKey();
+            if (!encKey) {
+                validationService.addError(form, null,
+                    'You cannot change your email until you update your encryption key.', true);
+                return;
+            }
+
             _masterPassword = model.masterPassword;
-            _masterPasswordHash = cryptoService.hashPassword(_masterPassword);
             _newEmail = model.newEmail.toLowerCase();
 
-            var encKey = cryptoService.getEncKey();
-            if (encKey) {
-                $scope.tokenPromise = requestToken(model);
-            }
-            else {
-                // User is not using an enc key, let's make them one
-                $scope.tokenPromise = cipherService.updateKey(_masterPasswordHash, function () {
-                    return requestToken(model);
-                }, processError);
-            }
+            $scope.tokenPromise = cryptoService.hashPassword(_masterPassword).then(function (hash) {
+                _masterPasswordHash = hash;
+
+                var request = {
+                    newEmail: _newEmail,
+                    masterPasswordHash: _masterPasswordHash
+                };
+
+                return apiService.accounts.emailToken(request, function () {
+                    $scope.tokenSent = true;
+                }).$promise;
+            });
         };
 
-        function requestToken(model) {
-            var request = {
-                newEmail: _newEmail,
-                masterPasswordHash: _masterPasswordHash
-            };
-
-            return apiService.accounts.emailToken(request, function () {
-                $scope.tokenSent = true;
-            }).$promise;
-        }
-
         $scope.confirm = function (model) {
-            $scope.processing = true;
+            $scope.confirmPromise = cryptoService.makeKeyAndHash(_newEmail, _masterPassword).then(function (result) {
+                var encKey = cryptoService.getEncKey();
+                var newEncKey = cryptoService.encrypt(encKey.key, result.key, 'raw');
+                var request = {
+                    token: model.token,
+                    newEmail: _newEmail,
+                    masterPasswordHash: _masterPasswordHash,
+                    newMasterPasswordHash: result.hash,
+                    key: newEncKey
+                };
 
-            var newKey = cryptoService.makeKey(_masterPassword, _newEmail);
-            var encKey = cryptoService.getEncKey();
-            var newEncKey = cryptoService.encrypt(encKey.key, newKey, 'raw');
-
-            var request = {
-                token: model.token,
-                newEmail: _newEmail,
-                masterPasswordHash: _masterPasswordHash,
-                newMasterPasswordHash: cryptoService.hashPassword(_masterPassword, newKey),
-                key: newEncKey
-            };
-
-            $scope.confirmPromise = apiService.accounts.email(request).$promise.then(function () {
+                return apiService.accounts.email(request).$promise;
+            }).then(function () {
                 $uibModalInstance.dismiss('cancel');
                 authService.logOut();
                 $analytics.eventTrack('Changed Email');
                 return $state.go('frontend.login.info');
-            }, processError).then(function () {
+            }).then(function () {
                 toastr.success('Please log back in.', 'Email Changed');
-            }, processError);
+            });
         };
 
-        function processError() {
-            $uibModalInstance.dismiss('cancel');
-            toastr.error('Something went wrong. Try again.', 'Oh No!');
-        }
-
         $scope.close = function () {
             $uibModalInstance.dismiss('cancel');
         };

src/app/settings/settingsChangePasswordController.js

@@ -2,12 +2,19 @@
     .module('bit.settings')
 
     .controller('settingsChangePasswordController', function ($scope, $state, apiService, $uibModalInstance,
-        cryptoService, authService, cipherService, validationService, toastr, $analytics) {
+        cryptoService, authService, validationService, toastr, $analytics) {
         $analytics.eventTrack('settingsChangePasswordController', { category: 'Modal' });
 
         $scope.save = function (model, form) {
             var error = false;
 
+            var encKey = cryptoService.getEncKey();
+            if (!encKey) {
+                validationService.addError(form, null,
+                    'You cannot change your master password until you update your encryption key.', true);
+                error = true;
+            }
+
             if ($scope.model.newMasterPassword.length < 8) {
                 validationService.addError(form, 'NewMasterPasswordHash',
                     'Master password must be at least 8 characters long.', true);
@@ -23,48 +30,32 @@
                 return;
             }
 
-            $scope.processing = true;
-
-            var encKey = cryptoService.getEncKey();
-            if (encKey) {
-                $scope.savePromise = changePassword(model);
-            }
-            else {
-                // User is not using an enc key, let's make them one
-                var mpHash = cryptoService.hashPassword(model.masterPassword);
-                $scope.savePromise = cipherService.updateKey(mpHash, function () {
-                    return changePassword(model);
-                }, processError);
-            }
-        };
-
-        function changePassword(model) {
-            return authService.getUserProfile().then(function (profile) {
-                var newKey = cryptoService.makeKey(model.newMasterPassword, profile.email.toLowerCase());
+            var makeResult;
+            $scope.savePromise = authService.getUserProfile().then(function (profile) {
+                return cryptoService.makeKeyAndHash(profile.email, model.newMasterPassword);
+            }).then(function (result) {
+                makeResult = result;
+                return cryptoService.hashPassword(model.masterPassword);
+            }).then(function (hash) {
                 var encKey = cryptoService.getEncKey();
-                var newEncKey = cryptoService.encrypt(encKey.key, newKey, 'raw');
+                var newEncKey = cryptoService.encrypt(encKey.key, makeResult.key, 'raw');
 
                 var request = {
-                    masterPasswordHash: cryptoService.hashPassword(model.masterPassword),
-                    newMasterPasswordHash: cryptoService.hashPassword(model.newMasterPassword, newKey),
+                    masterPasswordHash: hash,
+                    newMasterPasswordHash: makeResult.hash,
                     key: newEncKey
                 };
 
                 return apiService.accounts.putPassword(request).$promise;
-            }, processError).then(function () {
+            }).then(function () {
                 $uibModalInstance.dismiss('cancel');
                 authService.logOut();
                 $analytics.eventTrack('Changed Password');
                 return $state.go('frontend.login.info');
-            }, processError).then(function () {
+            }).then(function () {
                 toastr.success('Please log back in.', 'Master Password Changed');
-            }, processError);
-        }
-
-        function processError() {
-            $uibModalInstance.dismiss('cancel');
-            toastr.error('Something went wrong.', 'Oh No!');
-        }
+            });
+        };
 
         $scope.close = function () {
             $uibModalInstance.dismiss('cancel');

src/app/settings/settingsController.js

@@ -105,22 +105,6 @@
             });
         };
 
-        $scope.twoFactor = function () {
-            var twoFactorModal = $uibModal.open({
-                animation: true,
-                templateUrl: 'app/settings/views/settingsTwoFactor.html',
-                controller: 'settingsTwoFactorController'
-            });
-
-            twoFactorModal.result.then(function (enabled) {
-                if (enabled === null) {
-                    return;
-                }
-
-                $scope.model.twoFactorEnabled = enabled;
-            });
-        };
-
         $scope.sessions = function () {
             $uibModal.open({
                 animation: true,

src/app/settings/settingsCreateOrganizationController.js

@@ -4,21 +4,25 @@
     .controller('settingsCreateOrganizationController', function ($scope, $state, apiService, cryptoService,
         toastr, $analytics, authService, stripe, constants) {
         $scope.plans = constants.plans;
+        $scope.storageGb = constants.storageGb;
 
         $scope.model = {
             plan: 'free',
             additionalSeats: 0,
             interval: 'year',
-            ownedBusiness: false
+            ownedBusiness: false,
+            additionalStorageGb: null
         };
 
         $scope.totalPrice = function () {
             if ($scope.model.interval === 'month') {
-                return ($scope.model.additionalSeats || 0) * ($scope.plans[$scope.model.plan].monthlySeatPrice || 0) +
+                return (($scope.model.additionalSeats || 0) * ($scope.plans[$scope.model.plan].monthlySeatPrice || 0)) +
+                    (($scope.model.additionalStorageGb || 0) * $scope.storageGb.monthlyPrice) +
                     ($scope.plans[$scope.model.plan].monthlyBasePrice || 0);
             }
             else {
-                return ($scope.model.additionalSeats || 0) * ($scope.plans[$scope.model.plan].annualSeatPrice || 0) +
+                return (($scope.model.additionalSeats || 0) * ($scope.plans[$scope.model.plan].annualSeatPrice || 0)) +
+                    (($scope.model.additionalStorageGb || 0) * $scope.storageGb.yearlyPrice) +
                     ($scope.plans[$scope.model.plan].annualBasePrice || 0);
             }
         };
@@ -65,11 +69,14 @@
                         key: shareKeyCt,
                         paymentToken: response.id,
                         additionalSeats: model.additionalSeats,
+                        additionalStorageGb: model.additionalStorageGb,
                         billingEmail: model.billingEmail,
                         businessName: model.ownedBusiness ? model.businessName : null
                     };
 
                     return apiService.organizations.post(paidRequest).$promise;
+                }, function (err) {
+                    throw err.message;
                 }).then(finalizeCreate);
             }
 

src/app/settings/settingsDeleteController.js

@@ -5,18 +5,18 @@
         authService, toastr, $analytics) {
         $analytics.eventTrack('settingsDeleteController', { category: 'Modal' });
         $scope.submit = function (model) {
-            var request = {
-                masterPasswordHash: cryptoService.hashPassword(model.masterPassword)
-            };
-
-            $scope.submitPromise = apiService.accounts.postDelete(request, function () {
+            $scope.submitPromise = cryptoService.hashPassword(model.masterPassword).then(function (hash) {
+                return apiService.accounts.postDelete({
+                    masterPasswordHash: hash
+                }).$promise;
+            }).then(function () {
                 $uibModalInstance.dismiss('cancel');
                 authService.logOut();
                 $analytics.eventTrack('Deleted Account');
-                $state.go('frontend.login.info').then(function () {
-                    toastr.success('Your account has been closed and all associated data has been deleted.', 'Account Deleted');
-                });
-            }).$promise;
+                return $state.go('frontend.login.info');
+            }).then(function () {
+                toastr.success('Your account has been closed and all associated data has been deleted.', 'Account Deleted');
+            });
         };
 
         $scope.close = function () {

src/app/settings/settingsPremiumController.js

@@ -0,0 +1,99 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsPremiumController', function ($scope, $state, apiService, toastr, $analytics, authService, stripe,
+        constants, $timeout, appSettings) {
+        authService.getUserProfile().then(function (profile) {
+            if (profile.premium) {
+                return $state.go('backend.user.settingsBilling');
+            }
+        });
+
+        var btInstance = null;
+        $scope.storageGbPrice = constants.storageGb.yearlyPrice;
+        $scope.premiumPrice = constants.premium.price;
+        $scope.paymentMethod = 'card';
+        $scope.dropinLoaded = false;
+
+        $scope.model = {
+            additionalStorageGb: null
+        };
+
+        $scope.changePaymentMethod = function () {
+            if ($scope.paymentMethod !== 'paypal') {
+                return;
+            }
+
+            braintree.dropin.create({
+                authorization: appSettings.braintreeKey,
+                container: '#bt-dropin-container',
+                paymentOptionPriority: ['paypal'],
+                paypal: {
+                    flow: 'vault',
+                    buttonStyle: {
+                        label: 'pay',
+                        size: 'medium',
+                        shape: 'pill',
+                        color: 'blue'
+                    }
+                }
+            }, function (createErr, instance) {
+                if (createErr) {
+                    console.error(createErr);
+                    return;
+                }
+
+                btInstance = instance;
+                $timeout(function () {
+                    $scope.dropinLoaded = true;
+                });
+            });
+        };
+
+        $scope.totalPrice = function () {
+            return $scope.premiumPrice + (($scope.model.additionalStorageGb || 0) * $scope.storageGbPrice);
+        };
+
+        $scope.submit = function (model) {
+            $scope.submitPromise = getPaymentToken(model).then(function (token) {
+                if (!token) {
+                    throw 'No payment token.';
+                }
+
+                var request = {
+                    paymentToken: token,
+                    additionalStorageGb: model.additionalStorageGb
+                };
+
+                return apiService.accounts.postPremium(request).$promise;
+            }, function (err) {
+                throw err;
+            }).then(function (result) {
+                return authService.updateProfilePremium(true);
+            }).then(function () {
+                $analytics.eventTrack('Signed Up Premium');
+                return authService.refreshAccessToken();
+            }).then(function () {
+                return $state.go('backend.user.settingsBilling');
+            }).then(function () {
+                toastr.success('Premium upgrade complete.', 'Success');
+            });
+        };
+
+        function getPaymentToken(model) {
+            if ($scope.paymentMethod === 'paypal') {
+                return btInstance.requestPaymentMethod().then(function (payload) {
+                    return payload.nonce;
+                }).catch(function (err) {
+                    throw err.message;
+                });
+            }
+            else {
+                return stripe.card.createToken(model.card).then(function (response) {
+                    return response.id;
+                }).catch(function (err) {
+                    throw err.message;
+                });
+            }
+        }
+    });

src/app/settings/settingsSessionsController.js

@@ -2,21 +2,28 @@
     .module('bit.settings')
 
     .controller('settingsSessionsController', function ($scope, $state, apiService, $uibModalInstance, cryptoService,
-        authService, toastr, $analytics) {
+        authService, tokenService, toastr, $analytics) {
         $analytics.eventTrack('settingsSessionsController', { category: 'Modal' });
         $scope.submit = function (model) {
-            var request = {
-                masterPasswordHash: cryptoService.hashPassword(model.masterPassword)
-            };
+            var hash, profile;
 
-            $scope.submitPromise = apiService.accounts.putSecurityStamp(request, function () {
+            $scope.submitPromise = cryptoService.hashPassword(model.masterPassword).then(function (theHash) {
+                hash = theHash;
+                return authService.getUserProfile();
+            }).then(function (theProfile) {
+                profile = theProfile;
+                return apiService.accounts.putSecurityStamp({
+                    masterPasswordHash: hash
+                }).$promise;
+            }).then(function () {
                 $uibModalInstance.dismiss('cancel');
                 authService.logOut();
+                tokenService.clearTwoFactorToken(profile.email);
                 $analytics.eventTrack('Deauthorized Sessions');
-                $state.go('frontend.login.info').then(function () {
-                    toastr.success('Please log back in.', 'All Sessions Deauthorized');
-                });
-            }).$promise;
+                return $state.go('frontend.login.info');
+            }).then(function () {
+                toastr.success('Please log back in.', 'All Sessions Deauthorized');
+            });
         };
 
         $scope.close = function () {

src/app/settings/settingsTwoFactorController.js

@@ -1,93 +0,0 @@
-angular
-    .module('bit.settings')
-
-    .controller('settingsTwoFactorController', function ($scope, apiService, $uibModalInstance, cryptoService, authService,
-        $q, toastr, $analytics) {
-        $analytics.eventTrack('settingsTwoFactorController', { category: 'Modal' });
-        var _issuer = 'bitwarden',
-            _profile = null,
-            _masterPasswordHash;
-
-        authService.getUserProfile().then(function (profile) {
-            _profile = profile;
-            $scope.account = _profile.email;
-            $scope.enabled = function () {
-                return _profile.extended && _profile.extended.twoFactorEnabled;
-            };
-        });
-
-        $scope.auth = function (model) {
-            _masterPasswordHash = cryptoService.hashPassword(model.masterPassword);
-
-            $scope.authPromise = apiService.accounts.getTwoFactor({
-                masterPasswordHash: _masterPasswordHash,
-                provider: 0 /* Only authenticator provider for now. */
-            }, function (response) {
-                processResponse(response);
-            }).$promise;
-        };
-
-        function formatString(s) {
-            if (!s) {
-                return null;
-            }
-
-            return s.replace(/(.{4})/g, '$1 ').trim().toUpperCase();
-        }
-
-        function processResponse(response) {
-            var key = response.AuthenticatorKey;
-            $scope.twoFactorModel = {
-                enabled: response.TwoFactorEnabled,
-                key: formatString(key),
-                recovery: formatString(response.TwoFactorRecoveryCode),
-                qr: 'https://chart.googleapis.com/chart?chs=120x120&chld=L|0&cht=qr&chl=otpauth://totp/' +
-                _issuer + ':' + encodeURIComponent(_profile.email) +
-                '%3Fsecret=' + encodeURIComponent(key) +
-                '%26issuer=' + _issuer
-            };
-        }
-
-        $scope.update = function (model) {
-            var currentlyEnabled = $scope.twoFactorModel.enabled;
-            if (currentlyEnabled && !confirm('Are you sure you want to disable two-step login?')) {
-                return;
-            }
-
-            var request = {
-                enabled: !currentlyEnabled,
-                token: model.token.replace(' ', ''),
-                masterPasswordHash: _masterPasswordHash
-            };
-
-            $scope.updatePromise = apiService.accounts.putTwoFactor({}, request, function (response) {
-                if (response.TwoFactorEnabled) {
-                    $analytics.eventTrack('Enabled Two-step Login');
-                    toastr.success('Two-step login has been enabled.');
-                    if (_profile.extended) _profile.extended.twoFactorEnabled = true;
-                    processResponse(response);
-                    $('#token').blur();
-                    model.token = null;
-                }
-                else {
-                    $analytics.eventTrack('Disabled Two-step Login');
-                    toastr.success('Two-step login has been disabled.');
-                    if (_profile.extended) _profile.extended.twoFactorEnabled = false;
-                    $scope.close();
-                }
-            }).$promise;
-        };
-
-        $scope.print = function (printContent) {
-            $analytics.eventTrack('Print Recovery Code');
-            var w = window.open();
-            w.document.write('<div style="font-size: 18px; text-align: center;"><p>bitwarden two-step login recovery code:</p>' +
-                '<pre>' + printContent + '</pre>');
-            w.print();
-            w.close();
-        };
-
-        $scope.close = function () {
-            $uibModalInstance.close(!_profile.extended ? null : _profile.extended.twoFactorEnabled);
-        };
-    });

src/app/settings/settingsTwoStepAuthenticatorController.js

@@ -0,0 +1,108 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsTwoStepAuthenticatorController', function ($scope, apiService, $uibModalInstance, cryptoService,
+        authService, $q, toastr, $analytics, constants, $timeout) {
+        $analytics.eventTrack('settingsTwoStepAuthenticatorController', { category: 'Modal' });
+        var _issuer = 'bitwarden',
+            _profile = null,
+            _masterPasswordHash,
+            _key = null;
+
+        $timeout(function () {
+            $("#masterPassword").focus();
+        });
+
+        $scope.auth = function (model) {
+            var response = null;
+            $scope.authPromise = cryptoService.hashPassword(model.masterPassword).then(function (hash) {
+                _masterPasswordHash = hash;
+                return apiService.twoFactor.getAuthenticator({}, {
+                    masterPasswordHash: _masterPasswordHash
+                }).$promise;
+            }).then(function (apiResponse) {
+                response = apiResponse;
+                return authService.getUserProfile();
+            }).then(function (profile) {
+                _profile = profile;
+                $scope.account = _profile.email;
+                processResponse(response);
+            });
+        };
+
+        function formatString(s) {
+            if (!s) {
+                return null;
+            }
+
+            return s.replace(/(.{4})/g, '$1 ').trim().toUpperCase();
+        }
+
+        function processResponse(response) {
+            $scope.enabled = response.Enabled;
+            _key = response.Key;
+
+            $scope.model = {
+                key: formatString(_key),
+                qr: 'https://chart.googleapis.com/chart?chs=120x120&chld=L|0&cht=qr&chl=otpauth://totp/' +
+                _issuer + ':' + encodeURIComponent(_profile.email) +
+                '%3Fsecret=' + encodeURIComponent(_key) +
+                '%26issuer=' + _issuer
+            };
+            $scope.updateModel = {
+                token: null
+            };
+        }
+
+        $scope.submit = function (model) {
+            if (!model || !model.token) {
+                disable();
+                return;
+            }
+
+            update(model);
+        };
+
+        function disable() {
+            if (!confirm('Are you sure you want to disable the authenticator app provider?')) {
+                return;
+            }
+
+            $scope.submitPromise = apiService.twoFactor.disable({}, {
+                masterPasswordHash: _masterPasswordHash,
+                type: constants.twoFactorProvider.authenticator
+            }, function (response) {
+                $analytics.eventTrack('Disabled Two-step Authenticator');
+                toastr.success('Authenticator app has been disabled.');
+                $scope.enabled = response.Enabled;
+                $scope.close();
+            }).$promise;
+        }
+
+        function update(model) {
+            $scope.submitPromise = apiService.twoFactor.putAuthenticator({}, {
+                token: model.token.replace(' ', ''),
+                key: _key,
+                masterPasswordHash: _masterPasswordHash
+            }, function (response) {
+                $analytics.eventTrack('Enabled Two-step Authenticator');
+                processResponse(response);
+                model.token = null;
+            }).$promise;
+        }
+
+        var closing = false;
+        $scope.close = function () {
+            closing = true;
+            $uibModalInstance.close($scope.enabled);
+        };
+
+        $scope.$on('modal.closing', function (e, reason, closed) {
+            if (closing) {
+                return;
+            }
+
+            e.preventDefault();
+            $scope.close();
+        });
+    });

src/app/settings/settingsTwoStepController.js

@@ -0,0 +1,82 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsTwoStepController', function ($scope, apiService, toastr, $analytics, constants,
+        $filter, $uibModal, authService) {
+        $scope.providers = constants.twoFactorProviderInfo;
+        $scope.premium = true;
+
+        authService.getUserProfile().then(function (profile) {
+            $scope.premium = profile.premium;
+            return apiService.twoFactor.list({}).$promise;
+        }).then(function (response) {
+            if (response.Data) {
+                for (var i = 0; i < response.Data.length; i++) {
+                    if (!response.Data[i].Enabled) {
+                        continue;
+                    }
+
+                    var provider = $filter('filter')($scope.providers, { type: response.Data[i].Type });
+                    if (provider.length) {
+                        provider[0].enabled = true;
+                    }
+                }
+            }
+
+            return;
+        });
+
+        $scope.edit = function (provider) {
+            if (!$scope.premium && !provider.free) {
+                $uibModal.open({
+                    animation: true,
+                    templateUrl: 'app/views/premiumRequired.html',
+                    controller: 'premiumRequiredController'
+                });
+                return;
+            }
+
+            if (provider.type === constants.twoFactorProvider.authenticator) {
+                typeName = 'Authenticator';
+            }
+            else if (provider.type === constants.twoFactorProvider.email) {
+                typeName = 'Email';
+            }
+            else if (provider.type === constants.twoFactorProvider.yubikey) {
+                typeName = 'Yubi';
+            }
+            else if (provider.type === constants.twoFactorProvider.duo) {
+                typeName = 'Duo';
+            }
+            else if (provider.type === constants.twoFactorProvider.u2f) {
+                typeName = 'U2f';
+            }
+            else {
+                return;
+            }
+
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/settings/views/settingsTwoStep' + typeName + '.html',
+                controller: 'settingsTwoStep' + typeName + 'Controller',
+                resolve: {
+                    enabled: function () { return provider.enabled; }
+                }
+            });
+
+            modal.result.then(function (enabled) {
+                if (enabled || enabled === false) {
+                    // do not adjust when undefined or null
+                    provider.enabled = enabled;
+                }
+            });
+        };
+
+        $scope.viewRecover = function () {
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/settings/views/settingsTwoStepRecover.html',
+                controller: 'settingsTwoStepRecoverController'
+            });
+        };
+    });

src/app/settings/settingsTwoStepDuoController.js

@@ -0,0 +1,92 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsTwoStepDuoController', function ($scope, apiService, $uibModalInstance, cryptoService,
+        toastr, $analytics, constants, $timeout) {
+        $analytics.eventTrack('settingsTwoStepDuoController', { category: 'Modal' });
+        var _masterPasswordHash;
+
+        $scope.updateModel = {
+            token: null,
+            host: null,
+            ikey: null,
+            skey: null
+        };
+
+        $timeout(function () {
+            $("#masterPassword").focus();
+        });
+
+        $scope.auth = function (model) {
+            $scope.authPromise = cryptoService.hashPassword(model.masterPassword).then(function (hash) {
+                _masterPasswordHash = hash;
+                return apiService.twoFactor.getDuo({}, {
+                    masterPasswordHash: _masterPasswordHash
+                }).$promise;
+            }).then(function (apiResponse) {
+                processResult(apiResponse);
+                $scope.authed = true;
+            });
+        };
+
+        $scope.submit = function (model) {
+            if ($scope.enabled) {
+                disable();
+                return;
+            }
+
+            update(model);
+        };
+
+        function disable() {
+            if (!confirm('Are you sure you want to disable the Duo provider?')) {
+                return;
+            }
+
+            $scope.submitPromise = apiService.twoFactor.disable({}, {
+                masterPasswordHash: _masterPasswordHash,
+                type: constants.twoFactorProvider.duo
+            }, function (response) {
+                $analytics.eventTrack('Disabled Two-step Duo');
+                toastr.success('Duo has been disabled.');
+                $scope.enabled = response.Enabled;
+                $scope.close();
+            }).$promise;
+        }
+
+        function update(model) {
+            $scope.submitPromise = apiService.twoFactor.putDuo({}, {
+                integrationKey: model.ikey,
+                secretKey: model.skey,
+                host: model.host,
+                masterPasswordHash: _masterPasswordHash
+            }, function (response) {
+                $analytics.eventTrack('Enabled Two-step Duo');
+                processResult(response);
+            }).$promise;
+        }
+
+        function processResult(response) {
+            $scope.enabled = response.Enabled;
+            $scope.updateModel = {
+                ikey: response.IntegrationKey,
+                skey: response.SecretKey,
+                host: response.Host
+            };
+        }
+
+        var closing = false;
+        $scope.close = function () {
+            closing = true;
+            $uibModalInstance.close($scope.enabled);
+        };
+        
+        $scope.$on('modal.closing', function (e, reason, closed) {
+            if (closing) {
+                return;
+            }
+
+            e.preventDefault();
+            $scope.close();
+        });
+    });

src/app/settings/settingsTwoStepEmailController.js

@@ -0,0 +1,114 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsTwoStepEmailController', function ($scope, apiService, $uibModalInstance, cryptoService,
+        authService, toastr, $analytics, constants, $timeout) {
+        $analytics.eventTrack('settingsTwoStepEmailController', { category: 'Modal' });
+        var _profile = null,
+            _masterPasswordHash;
+
+        $scope.updateModel = {
+            token: null,
+            email: null
+        };
+
+        $timeout(function () {
+            $("#masterPassword").focus();
+        });
+
+        $scope.auth = function (model) {
+            var response = null;
+            $scope.authPromise = cryptoService.hashPassword(model.masterPassword).then(function (hash) {
+                _masterPasswordHash = hash;
+                return apiService.twoFactor.getEmail({}, {
+                    masterPasswordHash: _masterPasswordHash
+                }).$promise;
+            }).then(function (apiResponse) {
+                response = apiResponse;
+                return authService.getUserProfile();
+            }).then(function (profile) {
+                _profile = profile;
+                $scope.enabled = response.Enabled;
+                $scope.updateModel.email = $scope.enabled ? response.Email : _profile.email;
+                $scope.authed = true;
+            });
+        };
+
+        $scope.sendEmail = function (model) {
+            $scope.emailError = false;
+            $scope.emailSuccess = false;
+
+            if (!model || !model.email || model.email.indexOf('@') < 0) {
+                $scope.emailError = true;
+                $scope.emailSuccess = false;
+                return;
+            }
+
+            $scope.emailLoading = true;
+            apiService.twoFactor.sendEmail({}, {
+                masterPasswordHash: _masterPasswordHash,
+                email: model.email
+            }, function (response) {
+                $scope.emailError = false;
+                $scope.emailSuccess = true;
+                $scope.emailLoading = false;
+            }, function (response) {
+                $scope.emailError = true;
+                $scope.emailSuccess = false;
+                $scope.emailLoading = false;
+            });
+        };
+
+        $scope.submit = function (model) {
+            if (!model || !model.token) {
+                disable();
+                return;
+            }
+
+            update(model);
+        };
+
+        function disable() {
+            if (!confirm('Are you sure you want to disable the email provider?')) {
+                return;
+            }
+
+            $scope.submitPromise = apiService.twoFactor.disable({}, {
+                masterPasswordHash: _masterPasswordHash,
+                type: constants.twoFactorProvider.email
+            }, function (response) {
+                $analytics.eventTrack('Disabled Two-step Email');
+                toastr.success('Email has been disabled.');
+                $scope.enabled = response.Enabled;
+                $scope.close();
+            }).$promise;
+        }
+
+        function update(model) {
+            $scope.submitPromise = apiService.twoFactor.putEmail({}, {
+                email: model.email.toLowerCase().trim(),
+                token: model.token.replace(' ', ''),
+                masterPasswordHash: _masterPasswordHash
+            }, function (response) {
+                $analytics.eventTrack('Enabled Two-step Email');
+                $scope.enabled = response.Enabled;
+                model.email = response.Email;
+                model.token = null;
+            }).$promise;
+        }
+
+        var closing = false;
+        $scope.close = function () {
+            closing = true;
+            $uibModalInstance.close($scope.enabled);
+        };
+
+        $scope.$on('modal.closing', function (e, reason, closed) {
+            if (closing) {
+                return;
+            }
+
+            e.preventDefault();
+            $scope.close();
+        });
+    });

src/app/settings/settingsTwoStepRecoverController.js

@@ -0,0 +1,49 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsTwoStepRecoverController', function ($scope, apiService, $uibModalInstance, cryptoService,
+        $analytics, $timeout) {
+        $analytics.eventTrack('settingsTwoStepRecoverController', { category: 'Modal' });
+        $scope.code = null;
+
+        $scope.auth = function (model) {
+            $scope.authPromise = cryptoService.hashPassword(model.masterPassword).then(function (hash) {
+                return apiService.twoFactor.getRecover({}, {
+                    masterPasswordHash: hash
+                }).$promise;
+            }).then(function (apiResponse) {
+                $scope.code = formatString(apiResponse.Code);
+                $scope.authed = true;
+            });
+        };
+
+        $timeout(function () {
+            $("#masterPassword").focus();
+        });
+
+        $scope.print = function () {
+            if (!$scope.code) {
+                return;
+            }
+
+            $analytics.eventTrack('Print Recovery Code');
+            var w = window.open();
+            w.document.write('<div style="font-size: 18px; text-align: center;"><p>bitwarden two-step login recovery code:</p>' +
+                '<code style="font-family: Menlo, Monaco, Consolas, \'Courier New\', monospace;">' + $scope.code + '</code>' +
+                '</div><p style="text-align: center;">' + new Date() + '</p>');
+            w.print();
+            w.close();
+        };
+
+        function formatString(s) {
+            if (!s) {
+                return null;
+            }
+
+            return s.replace(/(.{4})/g, '$1 ').trim().toUpperCase();
+        }
+
+        $scope.close = function () {
+            $uibModalInstance.close();
+        };
+    });

src/app/settings/settingsTwoStepU2fController.js

@@ -0,0 +1,117 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsTwoStepU2fController', function ($scope, apiService, $uibModalInstance, cryptoService,
+        authService, toastr, $analytics, constants, $timeout, $window) {
+        $analytics.eventTrack('settingsTwoStepU2fController', { category: 'Modal' });
+        var _masterPasswordHash;
+        var closed = false;
+
+        $scope.deviceResponse = null;
+        $scope.deviceListening = false;
+        $scope.deviceError = false;
+
+        $timeout(function () {
+            $("#masterPassword").focus();
+        });
+
+        $scope.auth = function (model) {
+            $scope.authPromise = cryptoService.hashPassword(model.masterPassword).then(function (hash) {
+                _masterPasswordHash = hash;
+                return apiService.twoFactor.getU2f({}, {
+                    masterPasswordHash: _masterPasswordHash
+                }).$promise;
+            }).then(function (response) {
+                $scope.enabled = response.Enabled;
+                $scope.challenge = response.Challenge;
+                $scope.authed = true;
+                return $scope.readDevice();
+            });
+        };
+
+        $scope.readDevice = function () {
+            if (closed || $scope.enabled) {
+                return;
+            }
+
+            console.log('listening for key...');
+
+            $scope.deviceResponse = null;
+            $scope.deviceError = false;
+            $scope.deviceListening = true;
+
+            $window.u2f.register($scope.challenge.AppId, [{
+                version: $scope.challenge.Version,
+                challenge: $scope.challenge.Challenge
+            }], [], function (data) {
+                $scope.deviceListening = false;
+                if (data.errorCode === 5) {
+                    $scope.readDevice();
+                    return;
+                }
+                else if (data.errorCode) {
+                    $timeout(function () {
+                        $scope.deviceError = true;
+                    });
+                    console.log('error: ' + data.errorCode);
+                    return;
+                }
+
+                $timeout(function () {
+                    $scope.deviceResponse = JSON.stringify(data);
+                });
+            }, 10);
+        };
+
+        $scope.submit = function () {
+            if ($scope.enabled) {
+                disable();
+                return;
+            }
+
+            update();
+        };
+
+        function disable() {
+            if (!confirm('Are you sure you want to disable the U2F provider?')) {
+                return;
+            }
+
+            $scope.submitPromise = apiService.twoFactor.disable({}, {
+                masterPasswordHash: _masterPasswordHash,
+                type: constants.twoFactorProvider.u2f
+            }, function (response) {
+                $analytics.eventTrack('Disabled Two-step U2F');
+                toastr.success('U2F has been disabled.');
+                $scope.enabled = response.Enabled;
+                $scope.close();
+            }).$promise;
+        }
+
+        function update() {
+            $scope.submitPromise = apiService.twoFactor.putU2f({}, {
+                deviceResponse: $scope.deviceResponse,
+                masterPasswordHash: _masterPasswordHash
+            }, function (response) {
+                $analytics.eventTrack('Enabled Two-step U2F');
+                $scope.enabled = response.Enabled;
+                $scope.challenge = null;
+                $scope.deviceResponse = null;
+                $scope.deviceError = false;
+            }).$promise;
+        }
+
+        $scope.close = function () {
+            closed = true;
+            $uibModalInstance.close($scope.enabled);
+        };
+
+        $scope.$on('modal.closing', function (e, reason, isClosed) {
+            if (closed) {
+                return;
+            }
+
+            e.preventDefault();
+            $scope.close();
+        });
+    });

src/app/settings/settingsTwoStepYubiController.js

@@ -0,0 +1,116 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsTwoStepYubiController', function ($scope, apiService, $uibModalInstance, cryptoService,
+        authService, toastr, $analytics, constants, $timeout) {
+        $analytics.eventTrack('settingsTwoStepYubiController', { category: 'Modal' });
+        var _profile = null,
+            _masterPasswordHash;
+
+        $timeout(function () {
+            $("#masterPassword").focus();
+        });
+
+        $scope.auth = function (model) {
+            var response = null;
+            $scope.authPromise = cryptoService.hashPassword(model.masterPassword).then(function (hash) {
+                _masterPasswordHash = hash;
+                return apiService.twoFactor.getYubi({}, {
+                    masterPasswordHash: _masterPasswordHash
+                }).$promise;
+            }).then(function (apiResponse) {
+                response = apiResponse;
+                return authService.getUserProfile();
+            }).then(function (profile) {
+                _profile = profile;
+                processResult(response);
+                $scope.authed = true;
+            });
+        };
+
+        $scope.remove = function (model) {
+            model.key = null;
+            model.existingKey = null;
+        };
+
+        $scope.submit = function (model) {
+            $scope.submitPromise = apiService.twoFactor.putYubi({}, {
+                key1: model.key1.key,
+                key2: model.key2.key,
+                key3: model.key3.key,
+                nfc: model.nfc,
+                masterPasswordHash: _masterPasswordHash
+            }, function (response) {
+                $analytics.eventTrack('Saved Two-step YubiKey');
+                toastr.success('YubiKey saved.');
+                processResult(response);
+            }).$promise;
+        };
+
+        $scope.disable = function () {
+            if (!confirm('Are you sure you want to disable the YubiKey provider?')) {
+                return;
+            }
+
+            $scope.disableLoading = true;
+            $scope.submitPromise = apiService.twoFactor.disable({}, {
+                masterPasswordHash: _masterPasswordHash,
+                type: constants.twoFactorProvider.yubikey
+            }, function (response) {
+                $scope.disableLoading = false;
+                $analytics.eventTrack('Disabled Two-step YubiKey');
+                toastr.success('YubiKey has been disabled.');
+                $scope.enabled = response.Enabled;
+                $scope.close();
+            }, function (response) {
+                toastr.error('Failed to disable.');
+                $scope.disableLoading = false;
+            }).$promise;
+        };
+
+        function processResult(response) {
+            $scope.enabled = response.Enabled;
+            $scope.updateModel = {
+                key1: {
+                    key: response.Key1,
+                    existingKey: padRight(response.Key1, '*', 44)
+                },
+                key2: {
+                    key: response.Key2,
+                    existingKey: padRight(response.Key2, '*', 44)
+                },
+                key3: {
+                    key: response.Key3,
+                    existingKey: padRight(response.Key3, '*', 44)
+                },
+                nfc: response.Nfc === true || !response.Enabled
+            };
+        }
+
+        function padRight(str, character, size) {
+            if (!str || !character || str.length >= size) {
+                return str;
+            }
+
+            var max = (size - str.length) / character.length;
+            for (var i = 0; i < max; i++) {
+                str += character;
+            }
+            return str;
+        }
+
+        var closing = false;
+        $scope.close = function () {
+            closing = true;
+            $uibModalInstance.close($scope.enabled);
+        };
+
+        $scope.$on('modal.closing', function (e, reason, closed) {
+            if (closing) {
+                return;
+            }
+
+            e.preventDefault();
+            $scope.close();
+        });
+    });

src/app/settings/settingsUpdateKeyController.js

@@ -0,0 +1,81 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsUpdateKeyController', function ($scope, $state, apiService, $uibModalInstance, cipherService,
+        cryptoService, authService, validationService, toastr, $analytics, $q) {
+        $analytics.eventTrack('settingsUpdateKeyController', { category: 'Modal' });
+
+        $scope.save = function (form) {
+            var encKey = cryptoService.getEncKey();
+            if (encKey) {
+                validationService.addError(form, 'MasterPasswordHash',
+                    'You do not need to update. You are already using the new encryption key.', true);
+                return;
+            }
+
+            $scope.savePromise = cryptoService.hashPassword($scope.masterPassword).then(function (hash) {
+                return updateKey(hash);
+            }).then(function () {
+                $uibModalInstance.dismiss('cancel');
+                authService.logOut();
+                $analytics.eventTrack('Key Updated');
+                return $state.go('frontend.login.info');
+            }, function (e) {
+                throw e ? e : 'Error occurred.';
+            }).then(function () {
+                toastr.success('Please log back in. If you are using other bitwarden applications, ' +
+                    'log out and back in to those as well.', 'Key Updated', { timeOut: 10000 });
+            });
+        };
+
+        function updateKey(masterPasswordHash) {
+            var madeEncKey = cryptoService.makeEncKey(null);
+
+            var reencryptedLogins = [];
+            var loginsPromise = apiService.logins.list({}, function (encryptedLogins) {
+                var filteredEncryptedLogins = [];
+                for (var i = 0; i < encryptedLogins.Data.length; i++) {
+                    if (encryptedLogins.Data[i].OrganizationId) {
+                        continue;
+                    }
+
+                    filteredEncryptedLogins.push(encryptedLogins.Data[i]);
+                }
+
+                var unencryptedLogins = cipherService.decryptLogins(filteredEncryptedLogins);
+                reencryptedLogins = cipherService.encryptLogins(unencryptedLogins, madeEncKey.encKey);
+            }).$promise;
+
+            var reencryptedFolders = [];
+            var foldersPromise = apiService.folders.list({}, function (encryptedFolders) {
+                var unencryptedFolders = cipherService.decryptFolders(encryptedFolders.Data);
+                reencryptedFolders = cipherService.encryptFolders(unencryptedFolders, madeEncKey.encKey);
+            }).$promise;
+
+            var privateKey = cryptoService.getPrivateKey('raw'),
+                reencryptedPrivateKey = null;
+            if (privateKey) {
+                reencryptedPrivateKey = cryptoService.encrypt(privateKey, madeEncKey.encKey, 'raw');
+            }
+
+            return $q.all([loginsPromise, foldersPromise]).then(function () {
+                var request = {
+                    masterPasswordHash: masterPasswordHash,
+                    ciphers: reencryptedLogins,
+                    folders: reencryptedFolders,
+                    privateKey: reencryptedPrivateKey,
+                    key: madeEncKey.encKeyEnc
+                };
+
+                return apiService.accounts.putKey(request).$promise;
+            }, function () {
+                throw 'Error while encrypting data.';
+            }).then(function () {
+                cryptoService.setEncKey(madeEncKey.encKey, null, true);
+            });
+        }
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/settings/views/settings.html

@@ -85,27 +85,6 @@
             </div>
         </form>
     </div>
-    <div class="box box-default">
-        <div class="box-header with-border">
-            <h3 class="box-title">Two-step Log In</h3>
-        </div>
-        <div class="box-body">
-            <p>
-                Current Status:
-                <span class="label bg-green" ng-show="model.twoFactorEnabled">ENABLED</span>
-                <span class="label bg-gray" ng-show="!model.twoFactorEnabled">DISABLED</span>
-            </p>
-            <p>
-                Two-step login helps keep your account more secure by requiring a code provided by an app on your mobile device
-                while logging in (in addition to your master password).
-            </p>
-        </div>
-        <div class="box-footer">
-            <button type="button" class="btn btn-default btn-flat" ng-click="twoFactor()">
-                Manage Two-step Log In
-            </button>
-        </div>
-    </div>
     <div class="box box-default">
         <div class="box-header with-border">
             <h3 class="box-title">Organizations</h3>

src/app/settings/views/settingsBilling.html

@@ -0,0 +1,153 @@
+<section class="content-header">
+    <h1>Billing <small>manage your membership</small></h1>
+</section>
+<section class="content">
+    <div class="callout callout-warning" ng-if="subscription && subscription.cancelled">
+        <h4><i class="fa fa-warning"></i> Canceled</h4>
+        The premium membership subscription has been canceled.
+    </div>
+    <div class="callout callout-warning" ng-if="subscription && subscription.markedForCancel">
+        <h4><i class="fa fa-warning"></i> Pending Cancellation</h4>
+        <p>
+            The premium membership has been marked for cancellation at the end of the
+            current billing period.
+        </p>
+        <button type="button" class="btn btn-default btn-flat" ng-click="reinstate()">
+            Reinstate
+        </button>
+    </div>
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title">Premium Membership</h3>
+        </div>
+        <div class="box-body">
+            <div class="row">
+                <div class="col-md-5">
+                    <dl>
+                        <dt>Status</dt>
+                        <dd>
+                            <span style="text-transform: capitalize;">{{(subscription && subscription.status) || '-'}}</span>
+                            <span ng-if="subscription.markedForCancel">- marked for cancellation</span>
+                        </dd>
+                        <dt>Next Charge</dt>
+                        <dd>{{nextInvoice ? ((nextInvoice.date | date: format: mediumDate) + ', ' + (nextInvoice.amount | currency:'$')) : '-'}}</dd>
+                    </dl>
+                </div>
+                <div class="col-md-7">
+                    <strong>Details</strong>
+                    <div ng-show="loading">
+                        Loading...
+                    </div>
+                    <div class="table-responsive" style="margin: 0;" ng-show="!loading">
+                        <table class="table" style="margin: 0;">
+                            <tbody>
+                                <tr ng-repeat="item in subscription.items">
+                                    <td>
+                                        {{item.name}} {{item.qty > 1 ? '&times;' + item.qty : ''}}
+                                        @ {{item.amount | currency:'$'}}
+                                    </td>
+                                    <td class="text-right">{{(item.qty * item.amount) | currency:'$'}} /{{item.interval}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="box-footer" ng-if="!subscription.cancelled || subscription.markedForCancel">
+            <button type="button" class="btn btn-default btn-flat" ng-click="cancel()"
+                    ng-if="!subscription.cancelled && !subscription.markedForCancel">
+                Cancel
+            </button>
+            <button type="button" class="btn btn-default btn-flat" ng-click="reinstate()"
+                    ng-if="subscription.markedForCancel">
+                Reinstate
+            </button>
+        </div>
+    </div>
+    <div class="box box-default" ng-if="storage">
+        <div class="box-header with-border">
+            <h3 class="box-title">Storage</h3>
+        </div>
+        <div class="box-body">
+            <p>
+                You membership has a total of {{storage.maxGb}} GB of encrypted file storage.
+                You are currently using {{storage.currentName}}.
+            </p>
+            <div class="progress" style="margin: 0;">
+                <div class="progress-bar progress-bar-info" role="progressbar"
+                     aria-valuenow="{{storage.percentage}}" aria-valuemin="0" aria-valuemax="1"
+                     style="min-width: 50px; width: {{storage.percentage}}%;">
+                    {{storage.percentage}}%
+                </div>
+            </div>
+        </div>
+        <div class="box-footer" ng-if="!subscription.cancelled">
+            <button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(true)">
+                Add Storage
+            </button>
+            <button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(false)">
+                Remove Storage
+            </button>
+        </div>
+    </div>
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title">Payment Method</h3>
+        </div>
+        <div class="box-body">
+            <div ng-show="loading">
+                Loading...
+            </div>
+            <div ng-show="!loading && !paymentSource">
+                <i class="fa fa-credit-card"></i> No payment method on file.
+            </div>
+            <div ng-show="!loading && paymentSource">
+                <i class="fa" ng-class="{'fa-credit-card': paymentSource.type === 0,
+                   'fa-university': paymentSource.type === 1, 'fa-paypal fa-fw text-blue': paymentSource.type === 2}"></i>
+                {{paymentSource.description}}
+            </div>
+        </div>
+        <div class="box-footer">
+            <button type="button" class="btn btn-default btn-flat" ng-click="changePayment()">
+                {{ paymentSource ? 'Change Payment Method' : 'Add Payment Method' }}
+            </button>
+        </div>
+    </div>
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title">Charges</h3>
+        </div>
+        <div class="box-body">
+            <div ng-show="loading">
+                Loading...
+            </div>
+            <div ng-show="!loading && !charges.length">
+                No charges.
+            </div>
+            <div class="table-responsive" ng-show="charges.length">
+                <table class="table">
+                    <tbody>
+                        <tr ng-repeat="charge in charges">
+                            <td style="width: 200px">
+                                {{charge.date | date: format: mediumDate}}
+                            </td>
+                            <td style="min-width: 150px">
+                                {{charge.paymentSource}}
+                            </td>
+                            <td style="width: 150px; text-transform: capitalize;">
+                                {{charge.status}}
+                            </td>
+                            <td class="text-right" style="width: 150px;">
+                                {{charge.amount | currency:'$'}}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="box-footer">
+            Note: Any charges will appear on your statement as <b>BITWARDEN</b>.
+        </div>
+    </div>
+</section>

src/app/settings/views/settingsBillingAdjustStorage.html

@@ -0,0 +1,46 @@
+<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-database"></i>
+        {{add ? 'Add Storage' : 'Remove Storage'}}
+    </h4>
+</div>
+<form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise">
+    <div class="modal-body">
+        <div class="callout callout-default" ng-show="add">
+            <h4><i class="fa fa-dollar"></i> Note About Charges</h4>
+            <p>
+                Adding storage to your plan will result in adjustments to your billing totals and immediately charge your
+                payment method on file. The first charge will be prorated for the remainder of the current billing cycle.
+            </p>
+        </div>
+        <div class="callout callout-default" ng-show="!add">
+            <h4><i class="fa fa-dollar"></i> Note About Charges</h4>
+            <p>
+                Removing storage will result in adjustments to your billing totals that will be prorated as credits
+                to your next billing charge.
+            </p>
+        </div>
+        <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="row">
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="gb">{{add ? 'GB of Storage To Add' : 'GB of Storage To Remove'}}</label>
+                    <input type="number" id="gb" name="StroageGbAdjustment" ng-model="storageAdjustment" class="form-control"
+                           required min="0" max="99" />
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Submit
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/settings/views/settingsBillingChangePayment.html

@@ -0,0 +1,380 @@
+<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-credit-card"></i>
+        {{existingPaymentMethod ? 'Change Payment Method' : 'Add Payment Method'}}
+    </h4>
+</div>
+<form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise">
+    <div class="modal-body">
+        <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 ng-if="showPaymentOptions">
+            <label class="radio-inline radio-boxed">
+                <input type="radio" name="PaymentMethod" value="card" ng-model="paymentMethod"
+                       ng-change="changePaymentMethod('card')"><i class="fa fa-fw fa-credit-card"></i> Credit Card
+            </label>
+            <label class="radio-inline radio-boxed">
+                <input type="radio" name="PaymentMethod" value="paypal" ng-model="paymentMethod"
+                       ng-change="changePaymentMethod('paypal')"><i class="fa fa-fw fa-paypal"></i> PayPal
+            </label>
+            <hr />
+        </div>
+        <div ng-if="paymentMethod === 'paypal'">
+            <div id="bt-dropin-container"></div>
+        </div>
+        <div ng-if="paymentMethod === 'card'">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="form-group" show-errors>
+                        <label for="card_number">Card Number</label>
+                        <input type="text" id="card_number" name="card_number" ng-model="card.number"
+                               class="form-control" cc-number required api-field />
+                    </div>
+                </div>
+            </div>
+            <ul class="list-inline">
+                <li><div class="cc visa"></div></li>
+                <li><div class="cc mastercard"></div></li>
+                <li><div class="cc amex"></div></li>
+                <li><div class="cc discover"></div></li>
+                <li><div class="cc diners"></div></li>
+                <li><div class="cc jcb"></div></li>
+            </ul>
+            <div class="row">
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="exp_month">Expiration Month</label>
+                        <select id="exp_month" class="form-control" ng-model="card.exp_month" required cc-exp-month
+                                name="exp_month" api-field>
+                            <option value="">-- Select --</option>
+                            <option value="01">01 - January</option>
+                            <option value="02">02 - February</option>
+                            <option value="03">03 - March</option>
+                            <option value="04">04 - April</option>
+                            <option value="05">05 - May</option>
+                            <option value="06">06 - June</option>
+                            <option value="07">07 - July</option>
+                            <option value="08">08 - August</option>
+                            <option value="09">09 - September</option>
+                            <option value="10">10 - October</option>
+                            <option value="11">11 - November</option>
+                            <option value="12">12 - December</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="exp_year">Expiration Year</label>
+                        <select id="exp_year" class="form-control" ng-model="card.exp_year" required cc-exp-year
+                                name="exp_year" api-field>
+                            <option value="">-- Select --</option>
+                            <option value="17">2017</option>
+                            <option value="18">2018</option>
+                            <option value="19">2019</option>
+                            <option value="20">2020</option>
+                            <option value="21">2021</option>
+                            <option value="22">2022</option>
+                            <option value="23">2023</option>
+                            <option value="24">2024</option>
+                            <option value="25">2025</option>
+                            <option value="26">2026</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="cvc">
+                            CVC
+                            <a href="https://www.cvvnumber.com/cvv.html" target="_blank" title="What is this?"
+                               rel="noopener noreferrer">
+                                <i class="fa fa-question-circle"></i>
+                            </a>
+                        </label>
+                        <input type="text" id="cvc" ng-model="card.cvc" class="form-control" name="cvc"
+                               cc-type="number.$ccType" cc-cvc required api-field />
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="address_country">Country</label>
+                        <select id="address_country" class="form-control" ng-model="card.address_country"
+                                required name="address_country" api-field>
+                            <option value="">-- Select --</option>
+                            <option value="US">United States</option>
+                            <option value="CN">China</option>
+                            <option value="FR">France</option>
+                            <option value="DE">Germany</option>
+                            <option value="CA">Canada</option>
+                            <option value="GB">United Kingdom</option>
+                            <option value="AU">Australia</option>
+                            <option value="IN">India</option>
+                            <option value="-" disabled></option>
+                            <option value="AF">Afghanistan</option>
+                            <option value="AX">Åland Islands</option>
+                            <option value="AL">Albania</option>
+                            <option value="DZ">Algeria</option>
+                            <option value="AS">American Samoa</option>
+                            <option value="AD">Andorra</option>
+                            <option value="AO">Angola</option>
+                            <option value="AI">Anguilla</option>
+                            <option value="AQ">Antarctica</option>
+                            <option value="AG">Antigua and Barbuda</option>
+                            <option value="AR">Argentina</option>
+                            <option value="AM">Armenia</option>
+                            <option value="AW">Aruba</option>
+                            <option value="AT">Austria</option>
+                            <option value="AZ">Azerbaijan</option>
+                            <option value="BS">Bahamas</option>
+                            <option value="BH">Bahrain</option>
+                            <option value="BD">Bangladesh</option>
+                            <option value="BB">Barbados</option>
+                            <option value="BY">Belarus</option>
+                            <option value="BE">Belgium</option>
+                            <option value="BZ">Belize</option>
+                            <option value="BJ">Benin</option>
+                            <option value="BM">Bermuda</option>
+                            <option value="BT">Bhutan</option>
+                            <option value="BO">Bolivia, Plurinational State of</option>
+                            <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
+                            <option value="BA">Bosnia and Herzegovina</option>
+                            <option value="BW">Botswana</option>
+                            <option value="BV">Bouvet Island</option>
+                            <option value="BR">Brazil</option>
+                            <option value="IO">British Indian Ocean Territory</option>
+                            <option value="BN">Brunei Darussalam</option>
+                            <option value="BG">Bulgaria</option>
+                            <option value="BF">Burkina Faso</option>
+                            <option value="BI">Burundi</option>
+                            <option value="KH">Cambodia</option>
+                            <option value="CM">Cameroon</option>
+                            <option value="CV">Cape Verde</option>
+                            <option value="KY">Cayman Islands</option>
+                            <option value="CF">Central African Republic</option>
+                            <option value="TD">Chad</option>
+                            <option value="CL">Chile</option>
+                            <option value="CX">Christmas Island</option>
+                            <option value="CC">Cocos (Keeling) Islands</option>
+                            <option value="CO">Colombia</option>
+                            <option value="KM">Comoros</option>
+                            <option value="CG">Congo</option>
+                            <option value="CD">Congo, the Democratic Republic of the</option>
+                            <option value="CK">Cook Islands</option>
+                            <option value="CR">Costa Rica</option>
+                            <option value="CI">Côte d'Ivoire</option>
+                            <option value="HR">Croatia</option>
+                            <option value="CU">Cuba</option>
+                            <option value="CW">Curaçao</option>
+                            <option value="CY">Cyprus</option>
+                            <option value="CZ">Czech Republic</option>
+                            <option value="DK">Denmark</option>
+                            <option value="DJ">Djibouti</option>
+                            <option value="DM">Dominica</option>
+                            <option value="DO">Dominican Republic</option>
+                            <option value="EC">Ecuador</option>
+                            <option value="EG">Egypt</option>
+                            <option value="SV">El Salvador</option>
+                            <option value="GQ">Equatorial Guinea</option>
+                            <option value="ER">Eritrea</option>
+                            <option value="EE">Estonia</option>
+                            <option value="ET">Ethiopia</option>
+                            <option value="FK">Falkland Islands (Malvinas)</option>
+                            <option value="FO">Faroe Islands</option>
+                            <option value="FJ">Fiji</option>
+                            <option value="FI">Finland</option>
+                            <option value="GF">French Guiana</option>
+                            <option value="PF">French Polynesia</option>
+                            <option value="TF">French Southern Territories</option>
+                            <option value="GA">Gabon</option>
+                            <option value="GM">Gambia</option>
+                            <option value="GE">Georgia</option>
+                            <option value="GH">Ghana</option>
+                            <option value="GI">Gibraltar</option>
+                            <option value="GR">Greece</option>
+                            <option value="GL">Greenland</option>
+                            <option value="GD">Grenada</option>
+                            <option value="GP">Guadeloupe</option>
+                            <option value="GU">Guam</option>
+                            <option value="GT">Guatemala</option>
+                            <option value="GG">Guernsey</option>
+                            <option value="GN">Guinea</option>
+                            <option value="GW">Guinea-Bissau</option>
+                            <option value="GY">Guyana</option>
+                            <option value="HT">Haiti</option>
+                            <option value="HM">Heard Island and McDonald Islands</option>
+                            <option value="VA">Holy See (Vatican City State)</option>
+                            <option value="HN">Honduras</option>
+                            <option value="HK">Hong Kong</option>
+                            <option value="HU">Hungary</option>
+                            <option value="IS">Iceland</option>
+                            <option value="ID">Indonesia</option>
+                            <option value="IR">Iran, Islamic Republic of</option>
+                            <option value="IQ">Iraq</option>
+                            <option value="IE">Ireland</option>
+                            <option value="IM">Isle of Man</option>
+                            <option value="IL">Israel</option>
+                            <option value="IT">Italy</option>
+                            <option value="JM">Jamaica</option>
+                            <option value="JP">Japan</option>
+                            <option value="JE">Jersey</option>
+                            <option value="JO">Jordan</option>
+                            <option value="KZ">Kazakhstan</option>
+                            <option value="KE">Kenya</option>
+                            <option value="KI">Kiribati</option>
+                            <option value="KP">Korea, Democratic People's Republic of</option>
+                            <option value="KR">Korea, Republic of</option>
+                            <option value="KW">Kuwait</option>
+                            <option value="KG">Kyrgyzstan</option>
+                            <option value="LA">Lao People's Democratic Republic</option>
+                            <option value="LV">Latvia</option>
+                            <option value="LB">Lebanon</option>
+                            <option value="LS">Lesotho</option>
+                            <option value="LR">Liberia</option>
+                            <option value="LY">Libya</option>
+                            <option value="LI">Liechtenstein</option>
+                            <option value="LT">Lithuania</option>
+                            <option value="LU">Luxembourg</option>
+                            <option value="MO">Macao</option>
+                            <option value="MK">Macedonia, the former Yugoslav Republic of</option>
+                            <option value="MG">Madagascar</option>
+                            <option value="MW">Malawi</option>
+                            <option value="MY">Malaysia</option>
+                            <option value="MV">Maldives</option>
+                            <option value="ML">Mali</option>
+                            <option value="MT">Malta</option>
+                            <option value="MH">Marshall Islands</option>
+                            <option value="MQ">Martinique</option>
+                            <option value="MR">Mauritania</option>
+                            <option value="MU">Mauritius</option>
+                            <option value="YT">Mayotte</option>
+                            <option value="MX">Mexico</option>
+                            <option value="FM">Micronesia, Federated States of</option>
+                            <option value="MD">Moldova, Republic of</option>
+                            <option value="MC">Monaco</option>
+                            <option value="MN">Mongolia</option>
+                            <option value="ME">Montenegro</option>
+                            <option value="MS">Montserrat</option>
+                            <option value="MA">Morocco</option>
+                            <option value="MZ">Mozambique</option>
+                            <option value="MM">Myanmar</option>
+                            <option value="NA">Namibia</option>
+                            <option value="NR">Nauru</option>
+                            <option value="NP">Nepal</option>
+                            <option value="NL">Netherlands</option>
+                            <option value="NC">New Caledonia</option>
+                            <option value="NZ">New Zealand</option>
+                            <option value="NI">Nicaragua</option>
+                            <option value="NE">Niger</option>
+                            <option value="NG">Nigeria</option>
+                            <option value="NU">Niue</option>
+                            <option value="NF">Norfolk Island</option>
+                            <option value="MP">Northern Mariana Islands</option>
+                            <option value="NO">Norway</option>
+                            <option value="OM">Oman</option>
+                            <option value="PK">Pakistan</option>
+                            <option value="PW">Palau</option>
+                            <option value="PS">Palestinian Territory, Occupied</option>
+                            <option value="PA">Panama</option>
+                            <option value="PG">Papua New Guinea</option>
+                            <option value="PY">Paraguay</option>
+                            <option value="PE">Peru</option>
+                            <option value="PH">Philippines</option>
+                            <option value="PN">Pitcairn</option>
+                            <option value="PL">Poland</option>
+                            <option value="PT">Portugal</option>
+                            <option value="PR">Puerto Rico</option>
+                            <option value="QA">Qatar</option>
+                            <option value="RE">Réunion</option>
+                            <option value="RO">Romania</option>
+                            <option value="RU">Russian Federation</option>
+                            <option value="RW">Rwanda</option>
+                            <option value="BL">Saint Barthélemy</option>
+                            <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
+                            <option value="KN">Saint Kitts and Nevis</option>
+                            <option value="LC">Saint Lucia</option>
+                            <option value="MF">Saint Martin (French part)</option>
+                            <option value="PM">Saint Pierre and Miquelon</option>
+                            <option value="VC">Saint Vincent and the Grenadines</option>
+                            <option value="WS">Samoa</option>
+                            <option value="SM">San Marino</option>
+                            <option value="ST">Sao Tome and Principe</option>
+                            <option value="SA">Saudi Arabia</option>
+                            <option value="SN">Senegal</option>
+                            <option value="RS">Serbia</option>
+                            <option value="SC">Seychelles</option>
+                            <option value="SL">Sierra Leone</option>
+                            <option value="SG">Singapore</option>
+                            <option value="SX">Sint Maarten (Dutch part)</option>
+                            <option value="SK">Slovakia</option>
+                            <option value="SI">Slovenia</option>
+                            <option value="SB">Solomon Islands</option>
+                            <option value="SO">Somalia</option>
+                            <option value="ZA">South Africa</option>
+                            <option value="GS">South Georgia and the South Sandwich Islands</option>
+                            <option value="SS">South Sudan</option>
+                            <option value="ES">Spain</option>
+                            <option value="LK">Sri Lanka</option>
+                            <option value="SD">Sudan</option>
+                            <option value="SR">Suriname</option>
+                            <option value="SJ">Svalbard and Jan Mayen</option>
+                            <option value="SZ">Swaziland</option>
+                            <option value="SE">Sweden</option>
+                            <option value="CH">Switzerland</option>
+                            <option value="SY">Syrian Arab Republic</option>
+                            <option value="TW">Taiwan, Province of China</option>
+                            <option value="TJ">Tajikistan</option>
+                            <option value="TZ">Tanzania, United Republic of</option>
+                            <option value="TH">Thailand</option>
+                            <option value="TL">Timor-Leste</option>
+                            <option value="TG">Togo</option>
+                            <option value="TK">Tokelau</option>
+                            <option value="TO">Tonga</option>
+                            <option value="TT">Trinidad and Tobago</option>
+                            <option value="TN">Tunisia</option>
+                            <option value="TR">Turkey</option>
+                            <option value="TM">Turkmenistan</option>
+                            <option value="TC">Turks and Caicos Islands</option>
+                            <option value="TV">Tuvalu</option>
+                            <option value="UG">Uganda</option>
+                            <option value="UA">Ukraine</option>
+                            <option value="AE">United Arab Emirates</option>
+                            <option value="UM">United States Minor Outlying Islands</option>
+                            <option value="UY">Uruguay</option>
+                            <option value="UZ">Uzbekistan</option>
+                            <option value="VU">Vanuatu</option>
+                            <option value="VE">Venezuela, Bolivarian Republic of</option>
+                            <option value="VN">Viet Nam</option>
+                            <option value="VG">Virgin Islands, British</option>
+                            <option value="VI">Virgin Islands, U.S.</option>
+                            <option value="WF">Wallis and Futuna</option>
+                            <option value="EH">Western Sahara</option>
+                            <option value="YE">Yemen</option>
+                            <option value="ZM">Zambia</option>
+                            <option value="ZW">Zimbabwe</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="address_zip"
+                               ng-bind="card.address_country === 'US' ? 'Zip Code' : 'Postal Code'"></label>
+                        <input type="text" id="address_zip" ng-model="card.address_zip"
+                               class="form-control" required name="address_zip" api-field />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Submit
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/settings/views/settingsChangeEmail.html

@@ -2,7 +2,8 @@
     <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h4 class="modal-title" id="changeEmailModelLabel"><i class="fa fa-at"></i> Change Email</h4>
 </div>
-<form name="changeEmailForm" ng-submit="changeEmailForm.$valid && token(model)" api-form="tokenPromise" ng-show="!tokenSent && !processing">
+<form name="changeEmailForm" ng-submit="changeEmailForm.$valid && token(model, changeEmailForm)" api-form="tokenPromise"
+      ng-show="!tokenSent">
     <div class="modal-body">
         <p>Below you can change your account's email address.</p>
         <div class="callout callout-danger validation-errors" ng-show="changeEmailForm.$errors">
@@ -29,26 +30,28 @@
     </div>
 </form>
 <form name="changeEmailConfirmForm" ng-submit="changeEmailConfirmForm.$valid && confirm(model)" api-form="confirmPromise"
-      ng-show="tokenSent && !processing">
+      ng-show="tokenSent">
     <div class="modal-body">
         <p>We have emailed a verification code to <b>{{model.newEmail}}</b>. Please check your email for this code and enter it below to finalize your the email address change.</p>
         <div class="callout callout-warning">
             <h4><i class="fa fa-warning"></i> Warning</h4>
             Proceeding will log you out of your current session, requiring you to log back in.
         </div>
+        <div class="callout callout-danger validation-errors" ng-show="changeEmailConfirmForm.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in changeEmailConfirmForm.$errors">{{e}}</li>
+            </ul>
+        </div>
         <div class="form-group" show-errors>
             <label for="token">Code</label>
             <input type="number" id="token" name="Token" ng-model="model.token" class="form-control" required api-field />
         </div>
     </div>
     <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-flat">
-            Change Email
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="changeEmailConfirmForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="changeEmailConfirmForm.$loading"></i>Change Email
         </button>
         <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
     </div>
 </form>
-<div ng-show="processing" class="modal-body text-center">
-    <p><i class="fa fa-cog fa-spin fa-3x"></i></p>
-    <p>Please wait. We are now changing your email and reencrypting all of your data. Do not close this window. You will be automatically logged out when this process has finished.</p>
-</div>

src/app/settings/views/settingsChangePassword.html

@@ -2,7 +2,7 @@
     <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h4 class="modal-title" id="changePasswrdModelLabel"><i class="fa fa-key"></i> Change Password</h4>
 </div>
-<form name="changePasswordForm" ng-submit="changePasswordForm.$valid && save(model, changePasswordForm)" api-form="savePromise" ng-show="!processing">
+<form name="changePasswordForm" ng-submit="changePasswordForm.$valid && save(model, changePasswordForm)" api-form="savePromise">
     <div class="modal-body">
         <p>Below you can change your account's master password.</p>
         <p>We recommend that you change your master password immediately if you believe that your credentials have been compromised.</p>
@@ -34,13 +34,9 @@
         </div>
     </div>
     <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-flat">
-            Change Password
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="changePasswordForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="changePasswordForm.$loading"></i>Change Password
         </button>
         <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
     </div>
 </form>
-<div ng-show="processing" class="modal-body text-center">
-    <p><i class="fa fa-cog fa-spin fa-3x"></i></p>
-    <p>Please wait. We are now changing your password and reencrypting all of your data. Do not close this window. You will be automatically logged out when this process has finished.</p>
-</div>

src/app/settings/views/settingsCreateOrganization.html

@@ -7,17 +7,17 @@
         for a specific entity (such as a family, small team, or large company).
     </p>
     <form name="createOrgForm" ng-submit="createOrgForm.$valid && submit(model)" api-form="submitPromise">
+        <div class="callout callout-danger validation-errors" ng-show="createOrgForm.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in createOrgForm.$errors">{{e}}</li>
+            </ul>
+        </div>
         <div class="box box-default">
             <div class="box-header with-border">
                 <h3 class="box-title">General Information</h3>
             </div>
             <div class="box-body">
-                <div class="callout callout-danger validation-errors" ng-show="createOrgForm.$errors">
-                    <h4>Errors have occurred</h4>
-                    <ul>
-                        <li ng-repeat="e in createOrgForm.$errors">{{e}}</li>
-                    </ul>
-                </div>
                 <div class="row">
                     <div class="col-md-6">
                         <div class="form-group" show-errors>
@@ -75,6 +75,7 @@
                         <span>For personal users such as families &amp; friends.</span>
                         <span>- Add and share with up to 10 users (5 included with base price)</span>
                         <span>- Create unlimited collections</span>
+                        <span>- 1 GB encrypted file storage</span>
                         <span>- Priority customer support</span>
                         <span>- 7 day free trial, cancel anytime</span>
                         <span class="bottom-line">
@@ -90,6 +91,7 @@
                         <span>For businesses and other team organizations.</span>
                         <span>- Add and share with unlimited users</span>
                         <span>- Create unlimited collections</span>
+                        <span>- 1 GB encrypted file storage</span>
                         <span>- Priority customer support</span>
                         <span>- 7 day free trial, cancel anytime</span>
                         <span class="bottom-line">
@@ -105,6 +107,7 @@
                         <span>For businesses and other large organizations.</span>
                         <span>- Add and share with unlimited users</span>
                         <span>- Create unlimited collections</span>
+                        <span>- 1 GB encrypted file storage</span>
                         <span>- Control user access with groups</span>
                         <span>- Sync your users and groups from a directory (AD, Azure AD, GSuite, LDAP)</span>
                         <span>- Priority customer support</span>
@@ -166,6 +169,27 @@
                 </div>
             </div>
         </div>
+        <div class="box box-default" ng-if="!plans[model.plan].noPayment">
+            <div class="box-header with-border">
+                <h3 class="box-title">Additional Storage</h3>
+            </div>
+            <div class="box-body">
+                <div class="form-group" show-errors style="margin: 0;">
+                    <p>
+                        Your plan comes with 1 GB of encrypted file storage. You can add additional
+                        storage for {{storageGb.price | currency:"$":2}} per GB /month.
+                    </p>
+                    <div class="row">
+                        <div class="col-md-4">
+                            <label for="additionalStorage" class="sr-only">Storage</label>
+                            <input type="number" id="additionalStorage" name="AdditionalStorageGb"
+                                   ng-model="model.additionalStorageGb" min="0" max="99" step="1" class="form-control"
+                                   placeholder="# of additional GB" api-field />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="box box-default" ng-if="!plans[model.plan].noPayment">
             <div class="box-header with-border">
                 <h3 class="box-title">Billing Summary</h3>
@@ -187,6 +211,12 @@
                             &times;12 mo. =
                             {{((model.additionalSeats || 0) * plans[model.plan].annualSeatPrice) | currency:"$":2}} /year
                         </span>
+                        <span>
+                            Additional storage:
+                            {{model.additionalStorageGb || 0}} GB &times; {{storageGb.price | currency:"$":2}}
+                            &times;12 mo. =
+                            {{(model.additionalStorageGb || 0) * storageGb.yearlyPrice | currency:"$":2}} /year
+                        </span>
                     </label>
                 </div>
                 <div class="radio radio-block" ng-if="model.plan !== 'personal'">
@@ -204,6 +234,11 @@
                             &times;{{plans[model.plan].monthlySeatPrice | currency:"$":2}} =
                             {{((model.additionalSeats || 0) * plans[model.plan].monthlySeatPrice) | currency:"$":2}} /month
                         </span>
+                        <span>
+                            Additional storage:
+                            {{model.additionalStorageGb || 0}} GB &times; {{storageGb.monthlyPrice | currency:"$":2}} =
+                            {{(model.additionalStorageGb || 0) * storageGb.monthlyPrice | currency:"$":2}} /month
+                        </span>
                     </label>
                 </div>
             </div>

src/app/settings/views/settingsPremium.html

@@ -0,0 +1,460 @@
+<section class="content-header">
+    <h1>Premium<span class="hidden-xs"> Membership</span><small>get started today!</small></h1>
+</section>
+<section class="content">
+    <form name="form" ng-submit="form.$valid && submit(model)" 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="box box-default">
+            <div class="box-body">
+                <div class="row">
+                    <div class="col-sm-8">
+                        <p>Sign up for a premium membership and get:</p>
+                        <ul class="fa-ul">
+                            <li>
+                                <i class="fa-li fa fa-check text-green"></i>
+                                1 GB of encrypted file storage.
+                            </li>
+                            <li>
+                                <i class="fa-li fa fa-check text-green"></i>
+                                Additional two-step login options such as YubiKey, FIDO U2F, and Duo.
+                            </li>
+                            <li>
+                                <i class="fa-li fa fa-check text-green"></i>
+                                TOTP verification code (2FA) generator for logins in your vault.
+                            </li>
+                            <li>
+                                <i class="fa-li fa fa-check text-green"></i>
+                                Priority customer support.
+                            </li>
+                            <li>
+                                <i class="fa-li fa fa-check text-green"></i>
+                                All future premium features. More coming soon!
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="col-sm-4">
+                        all for just<br />
+                        <span style="font-size: 30px;">{{premiumPrice | currency:"$":0}}</span> /year
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="box box-default">
+            <div class="box-header with-border">
+                <h3 class="box-title">Addons</h3>
+            </div>
+            <div class="box-body">
+                <div class="form-group" show-errors style="margin: 0;">
+                    <label for="additionalStorage">Storage</label>
+                    <p>
+                        Your plan comes with 1 GB of encrypted file storage. You can add additional
+                        storage for {{storageGbPrice | currency:"$":0}} per GB /year.
+                    </p>
+                    <div class="row">
+                        <div class="col-md-4">
+                            <input type="number" id="additionalStorage" name="AdditionalStorageGb"
+                                   ng-model="model.additionalStorageGb" min="0" max="99" step="1" class="form-control"
+                                   placeholder="# of additional GB" api-field />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="box box-default">
+            <div class="box-header with-border">
+                <h3 class="box-title">Billing Summary</h3>
+            </div>
+            <div class="box-body">
+                Premium membership:
+                {{premiumPrice | currency:"$"}}<br />
+                Additional storage:
+                {{model.additionalStorageGb || 0}} GB &times; {{storageGbPrice | currency:"$"}} =
+                {{(model.additionalStorageGb || 0) * storageGbPrice | currency:"$"}}
+            </div>
+            <div class="box-footer">
+                <h4>
+                    <b>Total:</b>
+                    {{totalPrice() | currency:"USD $"}} /year
+                </h4>
+                Your card will be charged immediately and on a recurring basis each year. You may cancel at any time.
+            </div>
+        </div>
+        <div class="box box-default">
+            <div class="box-header with-border">
+                <h3 class="box-title">Payment Information</h3>
+            </div>
+            <div class="box-body">
+                <div ng-if="false">
+                    <label class="radio-inline radio-lg radio-boxed">
+                        <input type="radio" name="PaymentMethod" value="card" ng-model="paymentMethod"
+                               ng-change="changePaymentMethod()"><i class="fa fa-fw fa-credit-card"></i> Credit Card
+                    </label>
+                    <label class="radio-inline radio-lg radio-boxed">
+                        <input type="radio" name="PaymentMethod" value="paypal" ng-model="paymentMethod"
+                               ng-change="changePaymentMethod()"><i class="fa fa-fw fa-paypal"></i> PayPal
+                    </label>
+                    <hr />
+                </div>
+                <div ng-if="paymentMethod === 'paypal'">
+                    <div id="bt-dropin-container"></div>
+                </div>
+                <div ng-if="paymentMethod === 'card'">
+                    <div class="row">
+                        <div class="col-md-5">
+                            <div class="form-group" show-errors>
+                                <label for="card_number">Card Number</label>
+                                <input type="text" id="card_number" name="card_number" ng-model="model.card.number"
+                                       class="form-control" cc-number required api-field />
+                            </div>
+                        </div>
+                        <div class="col-md-7">
+                            <br class="hidden-sm hidden-xs" />
+                            <ul class="list-inline" style="margin: 0;">
+                                <li><div class="cc visa"></div></li>
+                                <li><div class="cc mastercard"></div></li>
+                                <li><div class="cc amex"></div></li>
+                                <li><div class="cc discover"></div></li>
+                                <li><div class="cc diners"></div></li>
+                                <li><div class="cc jcb"></div></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-4">
+                            <div class="form-group" show-errors>
+                                <label for="exp_month">Expiration Month</label>
+                                <select id="exp_month" class="form-control" ng-model="model.card.exp_month" required cc-exp-month
+                                        name="exp_month" api-field>
+                                    <option value="">-- Select --</option>
+                                    <option value="01">01 - January</option>
+                                    <option value="02">02 - February</option>
+                                    <option value="03">03 - March</option>
+                                    <option value="04">04 - April</option>
+                                    <option value="05">05 - May</option>
+                                    <option value="06">06 - June</option>
+                                    <option value="07">07 - July</option>
+                                    <option value="08">08 - August</option>
+                                    <option value="09">09 - September</option>
+                                    <option value="10">10 - October</option>
+                                    <option value="11">11 - November</option>
+                                    <option value="12">12 - December</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-sm-4">
+                            <div class="form-group" show-errors>
+                                <label for="exp_year">Expiration Year</label>
+                                <select id="exp_year" class="form-control" ng-model="model.card.exp_year" required cc-exp-year
+                                        name="exp_year" api-field>
+                                    <option value="">-- Select --</option>
+                                    <option value="17">2017</option>
+                                    <option value="18">2018</option>
+                                    <option value="19">2019</option>
+                                    <option value="20">2020</option>
+                                    <option value="21">2021</option>
+                                    <option value="22">2022</option>
+                                    <option value="23">2023</option>
+                                    <option value="24">2024</option>
+                                    <option value="25">2025</option>
+                                    <option value="26">2026</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-sm-4">
+                            <div class="form-group" show-errors>
+                                <label for="cvc">
+                                    CVC
+                                    <a href="https://www.cvvnumber.com/cvv.html" target="_blank" title="What is this?"
+                                       rel="noopener noreferrer">
+                                        <i class="fa fa-question-circle"></i>
+                                    </a>
+                                </label>
+                                <input type="text" id="cvc" ng-model="model.card.cvc" class="form-control" name="cvc"
+                                       cc-type="number.$ccType" cc-cvc required api-field />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div class="form-group" show-errors>
+                                <label for="address_country">Country</label>
+                                <select id="address_country" class="form-control" ng-model="model.card.address_country"
+                                        required name="address_country" api-field>
+                                    <option value="">-- Select --</option>
+                                    <option value="US">United States</option>
+                                    <option value="CN">China</option>
+                                    <option value="FR">France</option>
+                                    <option value="DE">Germany</option>
+                                    <option value="CA">Canada</option>
+                                    <option value="GB">United Kingdom</option>
+                                    <option value="AU">Australia</option>
+                                    <option value="IN">India</option>
+                                    <option value="-" disabled></option>
+                                    <option value="AF">Afghanistan</option>
+                                    <option value="AX">Åland Islands</option>
+                                    <option value="AL">Albania</option>
+                                    <option value="DZ">Algeria</option>
+                                    <option value="AS">American Samoa</option>
+                                    <option value="AD">Andorra</option>
+                                    <option value="AO">Angola</option>
+                                    <option value="AI">Anguilla</option>
+                                    <option value="AQ">Antarctica</option>
+                                    <option value="AG">Antigua and Barbuda</option>
+                                    <option value="AR">Argentina</option>
+                                    <option value="AM">Armenia</option>
+                                    <option value="AW">Aruba</option>
+                                    <option value="AT">Austria</option>
+                                    <option value="AZ">Azerbaijan</option>
+                                    <option value="BS">Bahamas</option>
+                                    <option value="BH">Bahrain</option>
+                                    <option value="BD">Bangladesh</option>
+                                    <option value="BB">Barbados</option>
+                                    <option value="BY">Belarus</option>
+                                    <option value="BE">Belgium</option>
+                                    <option value="BZ">Belize</option>
+                                    <option value="BJ">Benin</option>
+                                    <option value="BM">Bermuda</option>
+                                    <option value="BT">Bhutan</option>
+                                    <option value="BO">Bolivia, Plurinational State of</option>
+                                    <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
+                                    <option value="BA">Bosnia and Herzegovina</option>
+                                    <option value="BW">Botswana</option>
+                                    <option value="BV">Bouvet Island</option>
+                                    <option value="BR">Brazil</option>
+                                    <option value="IO">British Indian Ocean Territory</option>
+                                    <option value="BN">Brunei Darussalam</option>
+                                    <option value="BG">Bulgaria</option>
+                                    <option value="BF">Burkina Faso</option>
+                                    <option value="BI">Burundi</option>
+                                    <option value="KH">Cambodia</option>
+                                    <option value="CM">Cameroon</option>
+                                    <option value="CV">Cape Verde</option>
+                                    <option value="KY">Cayman Islands</option>
+                                    <option value="CF">Central African Republic</option>
+                                    <option value="TD">Chad</option>
+                                    <option value="CL">Chile</option>
+                                    <option value="CX">Christmas Island</option>
+                                    <option value="CC">Cocos (Keeling) Islands</option>
+                                    <option value="CO">Colombia</option>
+                                    <option value="KM">Comoros</option>
+                                    <option value="CG">Congo</option>
+                                    <option value="CD">Congo, the Democratic Republic of the</option>
+                                    <option value="CK">Cook Islands</option>
+                                    <option value="CR">Costa Rica</option>
+                                    <option value="CI">Côte d'Ivoire</option>
+                                    <option value="HR">Croatia</option>
+                                    <option value="CU">Cuba</option>
+                                    <option value="CW">Curaçao</option>
+                                    <option value="CY">Cyprus</option>
+                                    <option value="CZ">Czech Republic</option>
+                                    <option value="DK">Denmark</option>
+                                    <option value="DJ">Djibouti</option>
+                                    <option value="DM">Dominica</option>
+                                    <option value="DO">Dominican Republic</option>
+                                    <option value="EC">Ecuador</option>
+                                    <option value="EG">Egypt</option>
+                                    <option value="SV">El Salvador</option>
+                                    <option value="GQ">Equatorial Guinea</option>
+                                    <option value="ER">Eritrea</option>
+                                    <option value="EE">Estonia</option>
+                                    <option value="ET">Ethiopia</option>
+                                    <option value="FK">Falkland Islands (Malvinas)</option>
+                                    <option value="FO">Faroe Islands</option>
+                                    <option value="FJ">Fiji</option>
+                                    <option value="FI">Finland</option>
+                                    <option value="GF">French Guiana</option>
+                                    <option value="PF">French Polynesia</option>
+                                    <option value="TF">French Southern Territories</option>
+                                    <option value="GA">Gabon</option>
+                                    <option value="GM">Gambia</option>
+                                    <option value="GE">Georgia</option>
+                                    <option value="GH">Ghana</option>
+                                    <option value="GI">Gibraltar</option>
+                                    <option value="GR">Greece</option>
+                                    <option value="GL">Greenland</option>
+                                    <option value="GD">Grenada</option>
+                                    <option value="GP">Guadeloupe</option>
+                                    <option value="GU">Guam</option>
+                                    <option value="GT">Guatemala</option>
+                                    <option value="GG">Guernsey</option>
+                                    <option value="GN">Guinea</option>
+                                    <option value="GW">Guinea-Bissau</option>
+                                    <option value="GY">Guyana</option>
+                                    <option value="HT">Haiti</option>
+                                    <option value="HM">Heard Island and McDonald Islands</option>
+                                    <option value="VA">Holy See (Vatican City State)</option>
+                                    <option value="HN">Honduras</option>
+                                    <option value="HK">Hong Kong</option>
+                                    <option value="HU">Hungary</option>
+                                    <option value="IS">Iceland</option>
+                                    <option value="ID">Indonesia</option>
+                                    <option value="IR">Iran, Islamic Republic of</option>
+                                    <option value="IQ">Iraq</option>
+                                    <option value="IE">Ireland</option>
+                                    <option value="IM">Isle of Man</option>
+                                    <option value="IL">Israel</option>
+                                    <option value="IT">Italy</option>
+                                    <option value="JM">Jamaica</option>
+                                    <option value="JP">Japan</option>
+                                    <option value="JE">Jersey</option>
+                                    <option value="JO">Jordan</option>
+                                    <option value="KZ">Kazakhstan</option>
+                                    <option value="KE">Kenya</option>
+                                    <option value="KI">Kiribati</option>
+                                    <option value="KP">Korea, Democratic People's Republic of</option>
+                                    <option value="KR">Korea, Republic of</option>
+                                    <option value="KW">Kuwait</option>
+                                    <option value="KG">Kyrgyzstan</option>
+                                    <option value="LA">Lao People's Democratic Republic</option>
+                                    <option value="LV">Latvia</option>
+                                    <option value="LB">Lebanon</option>
+                                    <option value="LS">Lesotho</option>
+                                    <option value="LR">Liberia</option>
+                                    <option value="LY">Libya</option>
+                                    <option value="LI">Liechtenstein</option>
+                                    <option value="LT">Lithuania</option>
+                                    <option value="LU">Luxembourg</option>
+                                    <option value="MO">Macao</option>
+                                    <option value="MK">Macedonia, the former Yugoslav Republic of</option>
+                                    <option value="MG">Madagascar</option>
+                                    <option value="MW">Malawi</option>
+                                    <option value="MY">Malaysia</option>
+                                    <option value="MV">Maldives</option>
+                                    <option value="ML">Mali</option>
+                                    <option value="MT">Malta</option>
+                                    <option value="MH">Marshall Islands</option>
+                                    <option value="MQ">Martinique</option>
+                                    <option value="MR">Mauritania</option>
+                                    <option value="MU">Mauritius</option>
+                                    <option value="YT">Mayotte</option>
+                                    <option value="MX">Mexico</option>
+                                    <option value="FM">Micronesia, Federated States of</option>
+                                    <option value="MD">Moldova, Republic of</option>
+                                    <option value="MC">Monaco</option>
+                                    <option value="MN">Mongolia</option>
+                                    <option value="ME">Montenegro</option>
+                                    <option value="MS">Montserrat</option>
+                                    <option value="MA">Morocco</option>
+                                    <option value="MZ">Mozambique</option>
+                                    <option value="MM">Myanmar</option>
+                                    <option value="NA">Namibia</option>
+                                    <option value="NR">Nauru</option>
+                                    <option value="NP">Nepal</option>
+                                    <option value="NL">Netherlands</option>
+                                    <option value="NC">New Caledonia</option>
+                                    <option value="NZ">New Zealand</option>
+                                    <option value="NI">Nicaragua</option>
+                                    <option value="NE">Niger</option>
+                                    <option value="NG">Nigeria</option>
+                                    <option value="NU">Niue</option>
+                                    <option value="NF">Norfolk Island</option>
+                                    <option value="MP">Northern Mariana Islands</option>
+                                    <option value="NO">Norway</option>
+                                    <option value="OM">Oman</option>
+                                    <option value="PK">Pakistan</option>
+                                    <option value="PW">Palau</option>
+                                    <option value="PS">Palestinian Territory, Occupied</option>
+                                    <option value="PA">Panama</option>
+                                    <option value="PG">Papua New Guinea</option>
+                                    <option value="PY">Paraguay</option>
+                                    <option value="PE">Peru</option>
+                                    <option value="PH">Philippines</option>
+                                    <option value="PN">Pitcairn</option>
+                                    <option value="PL">Poland</option>
+                                    <option value="PT">Portugal</option>
+                                    <option value="PR">Puerto Rico</option>
+                                    <option value="QA">Qatar</option>
+                                    <option value="RE">Réunion</option>
+                                    <option value="RO">Romania</option>
+                                    <option value="RU">Russian Federation</option>
+                                    <option value="RW">Rwanda</option>
+                                    <option value="BL">Saint Barthélemy</option>
+                                    <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
+                                    <option value="KN">Saint Kitts and Nevis</option>
+                                    <option value="LC">Saint Lucia</option>
+                                    <option value="MF">Saint Martin (French part)</option>
+                                    <option value="PM">Saint Pierre and Miquelon</option>
+                                    <option value="VC">Saint Vincent and the Grenadines</option>
+                                    <option value="WS">Samoa</option>
+                                    <option value="SM">San Marino</option>
+                                    <option value="ST">Sao Tome and Principe</option>
+                                    <option value="SA">Saudi Arabia</option>
+                                    <option value="SN">Senegal</option>
+                                    <option value="RS">Serbia</option>
+                                    <option value="SC">Seychelles</option>
+                                    <option value="SL">Sierra Leone</option>
+                                    <option value="SG">Singapore</option>
+                                    <option value="SX">Sint Maarten (Dutch part)</option>
+                                    <option value="SK">Slovakia</option>
+                                    <option value="SI">Slovenia</option>
+                                    <option value="SB">Solomon Islands</option>
+                                    <option value="SO">Somalia</option>
+                                    <option value="ZA">South Africa</option>
+                                    <option value="GS">South Georgia and the South Sandwich Islands</option>
+                                    <option value="SS">South Sudan</option>
+                                    <option value="ES">Spain</option>
+                                    <option value="LK">Sri Lanka</option>
+                                    <option value="SD">Sudan</option>
+                                    <option value="SR">Suriname</option>
+                                    <option value="SJ">Svalbard and Jan Mayen</option>
+                                    <option value="SZ">Swaziland</option>
+                                    <option value="SE">Sweden</option>
+                                    <option value="CH">Switzerland</option>
+                                    <option value="SY">Syrian Arab Republic</option>
+                                    <option value="TW">Taiwan, Province of China</option>
+                                    <option value="TJ">Tajikistan</option>
+                                    <option value="TZ">Tanzania, United Republic of</option>
+                                    <option value="TH">Thailand</option>
+                                    <option value="TL">Timor-Leste</option>
+                                    <option value="TG">Togo</option>
+                                    <option value="TK">Tokelau</option>
+                                    <option value="TO">Tonga</option>
+                                    <option value="TT">Trinidad and Tobago</option>
+                                    <option value="TN">Tunisia</option>
+                                    <option value="TR">Turkey</option>
+                                    <option value="TM">Turkmenistan</option>
+                                    <option value="TC">Turks and Caicos Islands</option>
+                                    <option value="TV">Tuvalu</option>
+                                    <option value="UG">Uganda</option>
+                                    <option value="UA">Ukraine</option>
+                                    <option value="AE">United Arab Emirates</option>
+                                    <option value="UM">United States Minor Outlying Islands</option>
+                                    <option value="UY">Uruguay</option>
+                                    <option value="UZ">Uzbekistan</option>
+                                    <option value="VU">Vanuatu</option>
+                                    <option value="VE">Venezuela, Bolivarian Republic of</option>
+                                    <option value="VN">Viet Nam</option>
+                                    <option value="VG">Virgin Islands, British</option>
+                                    <option value="VI">Virgin Islands, U.S.</option>
+                                    <option value="WF">Wallis and Futuna</option>
+                                    <option value="EH">Western Sahara</option>
+                                    <option value="YE">Yemen</option>
+                                    <option value="ZM">Zambia</option>
+                                    <option value="ZW">Zimbabwe</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-sm-4">
+                            <div class="form-group" show-errors>
+                                <label for="address_zip"
+                                       ng-bind="model.card.address_country === 'US' ? 'Zip Code' : 'Postal Code'"></label>
+                                <input type="text" id="address_zip" ng-model="model.card.address_zip"
+                                       class="form-control" required name="address_zip" api-field />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="box-footer">
+                <button type="submit" class="btn btn-primary 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>
+</section>

src/app/settings/views/settingsSessions.html

@@ -6,10 +6,14 @@
     <div class="modal-body">
         <p>Concerned your account is logged in on another device?</p>
         <p>Proceed below to deauthorize all computers or devices that you have previously used.</p>
-        <p>This security step is recommended if you previously used a public PC or accidentally saved your password on a device that isn't yours.</p>
+        <p>
+            This security step is recommended if you previously used a public PC or accidentally saved your password
+            on a device that isn't yours. This step will also clear all previously remembered two-step login sessions.
+        </p>
         <div class="callout callout-warning">
             <h4><i class="fa fa-warning"></i> Warning</h4>
-            Proceeding will log you out of your current session as well, requiring you to log back in.
+            Proceeding will also log you out of your current session, requiring you to log back in. You will also be prompted
+            for two-step login again, if enabled.
         </div>
         <div class="callout callout-danger validation-errors" ng-show="logoutSessionsForm.$errors">
             <h4>Errors have occurred</h4>

src/app/settings/views/settingsTwoFactor.html

@@ -1,135 +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" id="twoFactorModelLabel"><i class="fa fa-key"></i> Two-step Log In</h4>
-</div>
-<form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise"
-      ng-if="!twoFactorModel">
-    <div class="modal-body">
-        <p ng-show="enabled()">
-            Two-step log in is already enabled on your account. To access your two-step
-            settings enter your master password below.
-        </p>
-        <p ng-show="!enabled()">To get started with two-step log in enter your master password below.</p>
-        <div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors">
-            <h4>Errors have occurred</h4>
-            <ul>
-                <li ng-repeat="e in authTwoStepForm.$errors">{{e}}</li>
-            </ul>
-        </div>
-        <div class="form-group" show-errors>
-            <label for="masterPassword">Master Password</label>
-            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword"
-                   class="form-control" required api-field />
-        </div>
-    </div>
-    <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="authTwoStepForm.$loading">
-            <i class="fa fa-refresh fa-spin loading-icon" ng-show="authTwoStepForm.$loading"></i>Continue
-        </button>
-        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
-    </div>
-</form>
-<form name="updateTwoStepForm" ng-submit="updateTwoStepForm.$valid && update(updateModel)" api-form="updatePromise"
-      ng-if="twoFactorModel">
-    <div class="modal-body">
-        <div ng-show="enabled()">
-            <div class="callout callout-success">
-                <h4><i class="fa fa-check-circle"></i> Enabled</h4>
-                <p>
-                    Two-step log in is enabled on your account. Incase you need to add it to another device, below is the QR
-                    code (or key) required by your verification app.
-                </p>
-            </div>
-            <p>Need a two-step verification app? Download one of the following:</p>
-        </div>
-        <div ng-show="!enabled()">
-            <p>Setting up two-step verification is easy, just follow these steps:</p>
-            <h4>1. Download a two-step verification app</h4>
-        </div>
-        <ul class="fa-ul">
-            <li>
-                <i class="fa-li fa fa-apple fa-lg"></i>
-                iOS devices:
-                <a href="https://itunes.apple.com/us/app/authy/id494168017?mt=8" target="_blank">
-                    Authy for iOS
-                </a>
-            </li>
-            <li>
-                <i class="fa-li fa fa-android fa-lg"></i>
-                Android devices:
-                <a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank">
-                    Authy for Android
-                </a>
-            </li>
-            <li>
-                <i class="fa-li fa fa-windows fa-lg"></i>
-                Windows devices:
-                <a href="https://www.microsoft.com/en-us/store/apps/authenticator/9wzdncrfj3rj" target="_blank">
-                    Microsoft Authenticator
-                </a>
-            </li>
-        </ul>
-        <p>These apps are recommended, however, other authenticator apps will also work.</p>
-        <hr ng-show="enabled()" />
-        <h4 ng-show="!enabled()" style="margin-top: 30px;">2. Scan this QR code with your verification app</h4>
-        <div class="row">
-            <div class="col-md-4 text-center">
-                <p><img ng-src="{{twoFactorModel.qr}}" alt="QR" class="img-thumbnail" /></p>
-            </div>
-            <div class="col-md-8">
-                <p>
-                    <strong>Can't scan the code?</strong> You can add the code to your application manually using the
-                    following details:
-                </p>
-                <ul class="list-unstyled">
-                    <li><strong>Key:</strong> <code>{{twoFactorModel.key}}</code></li>
-                    <li><strong>Account:</strong> {{account}}</li>
-                    <li><strong>Time based:</strong> Yes</li>
-                </ul>
-            </div>
-        </div>
-        <div ng-show="enabled()">
-            <hr />
-            <div class="callout callout-warning">
-                <h4><i class="fa fa-warning"></i> Recovery Code <i class="fa fa-warning"></i></h4>
-                <p>
-                    The recovery code allows you to access your account in the event that you lose your authenticator app.
-                    bitwarden support won't be able to assist you if you lose access to your account. We recommend
-                    you write down or print the recovery code below and keep it in a safe place.
-                </p>
-                <p><strong>Recovery Code:</strong> <code>{{twoFactorModel.recovery}}</code></p>
-                <button type="button" class="btn btn-default" ng-click="print(twoFactorModel.recovery)">
-                    <i class="fa fa-print"></i> Print
-                </button>
-            </div>
-        </div>
-        <hr ng-show="enabled()" />
-        <div class="callout callout-danger validation-errors" ng-show="updateTwoStepForm.$errors">
-            <h4>Errors have occurred</h4>
-            <ul>
-                <li ng-repeat="e in updateTwoStepForm.$errors">{{e}}</li>
-            </ul>
-        </div>
-        <h4 style="margin-top: 30px;">
-            <span ng-show="enabled()">Want to disable? </span><span ng-show="!enabled()">3. </span>
-            Enter the resulting verification code from the app
-        </h4>
-        <div class="form-group" show-errors>
-            <label for="token" class="sr-only">Verification Code</label>
-            <input type="text" id="token" name="Token" placeholder="Verification Code" ng-model="updateModel.token"
-                   class="form-control" required api-field />
-        </div>
-        <p ng-show="!enabled()">
-            NOTE: After enabling two-step log in, you will be required to enter the current code
-            generated by your verification app each time you log in.
-        </p>
-    </div>
-    <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="updateTwoStepForm.$loading">
-            <i class="fa fa-refresh fa-spin loading-icon" ng-show="updateTwoStepForm.$loading"></i>
-            <span ng-show="enabled()">Disable Two-step</span>
-            <span ng-show="!enabled()">Enable Two-step</span>
-        </button>
-        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
-    </div>
-</form>

src/app/settings/views/settingsTwoStep.html

@@ -0,0 +1,52 @@
+<section class="content-header">
+    <h1>Two-step Login <small>secure your account</small></h1>
+</section>
+<section class="content">
+    <div class="box box-danger">
+        <div class="box-header with-border">
+            <h3 class="box-title"><i class="fa fa-warning"></i> Recovery Code <i class="fa fa-warning"></i></h3>
+        </div>
+        <div class="box-body">
+            The recovery code allows you to access your account in the event that you can no longer use your normal
+            two-step login provider (ex. you lose your device). bitwarden support will not be able to assist you if you lose
+            access to your account. We recommend you write down or print the recovery code and keep it in a safe place.
+        </div>
+        <div class="box-footer">
+            <button type="button" class="btn btn-default btn-flat" ng-click="viewRecover()">View Recovery Code</button>
+        </div>
+    </div>
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title">Providers</h3>
+        </div>
+        <div class="box-body no-padding">
+            <div class="table-responsive">
+                <table class="table table-striped table-hover table-vmiddle">
+                    <tbody>
+                        <tr ng-repeat="provider in providers | orderBy: 'displayOrder'">
+                            <td style="width: 120px; height: 75px;" align="center">
+                                <a href="#" stop-click ng-click="edit(provider)">
+                                    <img alt="{{::provider.name}}" ng-src="{{'images/two-factor/' + provider.image}}" />
+                                </a>
+                            </td>
+                            <td>
+                                <a href="#" stop-click ng-click="edit(provider)">
+                                    {{::provider.name}}
+                                    <span class="label label-info" ng-if="!premium && !provider.free"
+                                          style="margin-left: 5px;">PREMIUM</span>
+                                </a>
+                                <div class="text-muted text-sm">{{::provider.description}}</div>
+                            </td>
+                            <td style="width: 100px;" class="text-right">
+                                <span class="label label-full"
+                                      ng-class="{ 'label-success': provider.enabled, 'label-default': !provider.enabled }">
+                                    {{provider.enabled ? 'Enabled' : 'Disabled'}}
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>

src/app/settings/views/settingsTwoStepAuthenticator.html

@@ -0,0 +1,116 @@
+<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 Login <small>authenticator app</small>
+    </h4>
+</div>
+<form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise"
+      ng-if="!model">
+    <div class="modal-body">
+        <p>Enter your master password to modify two-step login settings.</p>
+        <div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in authTwoStepForm.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-errors>
+            <label for="masterPassword">Master Password</label>
+            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword"
+                   class="form-control" required api-field />
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="authTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="authTwoStepForm.$loading"></i>Continue
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>
+<form name="submitTwoStepForm" ng-submit="submitTwoStepForm.$valid && submit(updateModel)" api-form="submitPromise"
+      ng-if="model">
+    <div class="modal-body">
+        <div ng-if="enabled">
+            <div class="callout callout-success">
+                <h4><i class="fa fa-check-circle"></i> Enabled</h4>
+                <p>
+                    Two-step login via authenticator app is enabled on your account.
+                </p>
+                <p>
+                    In case you need to add it to another device, below is the QR code (or key) required by your
+                    authenticator app.
+                </p>
+            </div>
+            <p>Need a two-step authenticator app? Download one of the following:</p>
+        </div>
+        <div ng-if="!enabled">
+            <p>Setting up two-step login with an authenticator app is easy, just follow these steps:</p>
+            <h4>1. Download a two-step authenticator app</h4>
+        </div>
+        <ul class="fa-ul">
+            <li>
+                <i class="fa-li fa fa-apple fa-lg"></i>
+                iOS devices:
+                <a href="https://itunes.apple.com/us/app/authy/id494168017?mt=8" target="_blank">
+                    Authy for iOS
+                </a>
+            </li>
+            <li>
+                <i class="fa-li fa fa-android fa-lg"></i>
+                Android devices:
+                <a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank">
+                    Authy for Android
+                </a>
+            </li>
+            <li>
+                <i class="fa-li fa fa-windows fa-lg"></i>
+                Windows devices:
+                <a href="https://www.microsoft.com/en-us/store/apps/authenticator/9wzdncrfj3rj" target="_blank">
+                    Microsoft Authenticator
+                </a>
+            </li>
+        </ul>
+        <p>These apps are recommended, however, other authenticator apps will also work.</p>
+        <hr ng-if="enabled" />
+        <h4 ng-if="!enabled" style="margin-top: 30px;">2. Scan this QR code with your authenticator app</h4>
+        <div class="row">
+            <div class="col-md-4 text-center">
+                <p><img ng-src="{{model.qr}}" alt="QR" class="img-thumbnail" /></p>
+            </div>
+            <div class="col-md-8">
+                <p>
+                    <strong>Can't scan the code?</strong> You can add the code to your application manually using the
+                    following details:
+                </p>
+                <ul class="list-unstyled">
+                    <li><strong>Key:</strong> <code>{{model.key}}</code></li>
+                    <li><strong>Account:</strong> {{account}}</li>
+                    <li><strong>Time based:</strong> Yes</li>
+                </ul>
+            </div>
+        </div>
+        <div ng-if="!enabled">
+            <h4 style="margin-top: 30px;">
+                3. Enter the resulting 6 digit verification code from the app
+            </h4>
+            <div class="callout callout-danger validation-errors" ng-show="submitTwoStepForm.$errors">
+                <h4>Errors have occurred</h4>
+                <ul>
+                    <li ng-repeat="e in submitTwoStepForm.$errors">{{e}}</li>
+                </ul>
+            </div>
+            <div class="form-group" show-errors>
+                <label for="token" class="sr-only">Verification Code</label>
+                <input type="text" id="token" name="Token" placeholder="Verification Code" ng-model="updateModel.token"
+                       class="form-control" required api-field />
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="submitTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="submitTwoStepForm.$loading"></i>
+            {{enabled ? 'Disable' : 'Enable'}}
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/settings/views/settingsTwoStepDuo.html

@@ -0,0 +1,76 @@
+<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 Login <small>duo</small>
+    </h4>
+</div>
+<form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise"
+      ng-if="!authed">
+    <div class="modal-body">
+        <p>Enter your master password to modify two-step login settings.</p>
+        <div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in authTwoStepForm.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-errors>
+            <label for="masterPassword">Master Password</label>
+            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword"
+                   class="form-control" required api-field />
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="authTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="authTwoStepForm.$loading"></i>Continue
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>
+<form name="submitTwoStepForm" ng-submit="submitTwoStepForm.$valid && submit(updateModel)" api-form="submitPromise"
+      ng-if="authed">
+    <div class="modal-body">
+        <div ng-if="enabled">
+            <div class="callout callout-success">
+                <h4><i class="fa fa-check-circle"></i> Enabled</h4>
+                <p>Two-step log via Duo is enabled on your account.</p>
+            </div>
+            <ul class="list-unstyled">
+                <li><strong>Integration Key:</strong> {{updateModel.ikey}}</li>
+                <li><strong>Secret Key:</strong> ************</li>
+                <li><strong>API Hostname:</strong> {{updateModel.host}}</li>
+            </ul>
+        </div>
+        <div ng-if="!enabled">
+            <div class="callout callout-danger validation-errors" ng-show="submitTwoStepForm.$errors">
+                <h4>Errors have occurred</h4>
+                <ul>
+                    <li ng-repeat="e in submitTwoStepForm.$errors">{{e}}</li>
+                </ul>
+            </div>
+            <p>Enter the bitwarden application information from your Duo Admin panel:</p>
+            <div class="form-group" show-errors>
+                <label for="ikey">Integration Key</label>
+                <input type="text" id="ikey" name="IntegrationKey" ng-model="updateModel.ikey" class="form-control"
+                       required api-field />
+            </div>
+            <div class="form-group" show-errors>
+                <label for="skey">Secret Key</label>
+                <input type="password" id="skey" name="SecretKey" ng-model="updateModel.skey" class="form-control"
+                       required api-field />
+            </div>
+            <div class="form-group" show-errors>
+                <label for="host">API Hostname</label>
+                <input type="text" id="host" name="Host" placeholder="ex. api-xxxxxxxx.duosecurity.com"
+                       ng-model="updateModel.host" class="form-control" required api-field />
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="submitTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="submitTwoStepForm.$loading"></i>
+            {{enabled ? 'Disable' : 'Enable'}}
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/settings/views/settingsTwoStepEmail.html

@@ -0,0 +1,77 @@
+<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 Login <small>email</small>
+    </h4>
+</div>
+<form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise"
+      ng-if="!authed">
+    <div class="modal-body">
+        <p>Enter your master password to modify two-step login settings.</p>
+        <div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in authTwoStepForm.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-errors>
+            <label for="masterPassword">Master Password</label>
+            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword"
+                   class="form-control" required api-field />
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="authTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="authTwoStepForm.$loading"></i>Continue
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>
+<form name="submitTwoStepForm" ng-submit="submitTwoStepForm.$valid && submit(updateModel)" api-form="submitPromise"
+      ng-if="authed">
+    <div class="modal-body">
+        <div ng-if="enabled">
+            <div class="callout callout-success">
+                <h4><i class="fa fa-check-circle"></i> Enabled</h4>
+                <p>Two-step log via email is enabled on your account.</p>
+            </div>
+            Email: <strong>{{updateModel.email}}</strong>
+        </div>
+        <div ng-if="!enabled">
+            <div class="callout callout-danger validation-errors" ng-show="submitTwoStepForm.$errors">
+                <h4>Errors have occurred</h4>
+                <ul>
+                    <li ng-repeat="e in submitTwoStepForm.$errors">{{e}}</li>
+                </ul>
+            </div>
+            <p>Setting up two-step login with email is easy, just follow these steps:</p>
+            <h4>1. Enter the email that you wish to receive verification codes</h4>
+            <div class="form-group" show-errors>
+                <label for="token" class="sr-only">Email</label>
+                <input type="text" id="email" name="Email" placeholder="Email" ng-model="updateModel.email"
+                       class="form-control" required api-field />
+            </div>
+            <button type="button" class="btn btn-default btn-flat" ng-click="sendEmail(updateModel)" ng-disabled="emailLoading">
+                <i class="fa fa-refresh fa-spin loading-icon" ng-show="emailLoading"></i>
+                Send Email
+            </button>
+            <span class="text-green" ng-if="emailSuccess">Verification code email was sent.</span>
+            <span class="text-red" ng-if="emailError">An error occurred when trying to send the email.</span>
+            <h4 style="margin-top: 30px;">
+                2. Enter the resulting 6 digit verification code from the email
+            </h4>
+            <div class="form-group" show-errors>
+                <label for="token" class="sr-only">Verification Code</label>
+                <input type="text" id="token" name="Token" placeholder="Verification Code" ng-model="updateModel.token"
+                       class="form-control" required api-field />
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="submitTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="submitTwoStepForm.$loading"></i>
+            {{enabled ? 'Disable' : 'Enable'}}
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/settings/views/settingsTwoStepRecover.html

@@ -0,0 +1,48 @@
+<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 Login <small>recovery code</small>
+    </h4>
+</div>
+<form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise"
+      ng-if="!authed">
+    <div class="modal-body">
+        <p>Enter your master password to view your recovery code.</p>
+        <div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in authTwoStepForm.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-errors>
+            <label for="masterPassword">Master Password</label>
+            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword"
+                   class="form-control" required api-field />
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="authTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="authTwoStepForm.$loading"></i>Continue
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>
+<div ng-if="authed">
+    <div class="modal-body text-center">
+        <div ng-if="code">
+            <p>Your two-step login recovery code:</p>
+            <p class="lead"><code class="text-lg">{{code}}</code></p>
+        </div>
+        <div ng-if="!code">
+            You have not enabled any two-step login providers yet. After you have enabled a two-step login provider you can
+            check back here for your recovery code.
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-if="code" ng-click="print()">
+            <i class="fa fa-print"></i>
+            Print Code
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</div>

src/app/settings/views/settingsTwoStepU2f.html

@@ -0,0 +1,93 @@
+<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 Login <small>fido u2f</small>
+    </h4>
+</div>
+<form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise"
+      ng-if="!authed">
+    <div class="modal-body">
+        <p>Enter your master password to modify two-step login settings.</p>
+        <div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in authTwoStepForm.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-errors>
+            <label for="masterPassword">Master Password</label>
+            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword"
+                   class="form-control" required api-field />
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="authTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="authTwoStepForm.$loading"></i>Continue
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>
+<form name="submitTwoStepForm" ng-submit="submitTwoStepForm.$valid && submit()" api-form="submitPromise"
+      ng-if="authed">
+    <div class="modal-body">
+        <div class="callout callout-warning">
+            <h4><i class="fa fa-warning"></i> Warning <i class="fa fa-warning"></i></h4>
+            <p>
+                Due to platform limitations, FIDO U2F cannot be used on all bitwarden applications. You should enable
+                another two-step login provider so that you can access your account when FIDO U2F cannot be used.
+            </p>
+            <p>Supported platforms:</p>
+            <ul>
+                <li>
+                    Web vault on a desktop/laptop with a U2F enabled browser (Chrome, Opera, Vivaldi, Brave, or Firefox with addon).
+                </li>
+                <li>Browser extensions on Chrome, Opera, Vivaldi, or Brave.</li>
+            </ul>
+        </div>
+        <div ng-if="enabled">
+            <div class="callout callout-success">
+                <h4><i class="fa fa-check-circle"></i> Enabled</h4>
+                <p>Two-step log via FIDO U2F is enabled on your account.</p>
+            </div>
+        </div>
+        <div ng-if="!enabled">
+            <div class="callout callout-danger validation-errors" ng-show="submitTwoStepForm.$errors">
+                <h4>Errors have occurred</h4>
+                <ul>
+                    <li ng-repeat="e in submitTwoStepForm.$errors">{{e}}</li>
+                </ul>
+            </div>
+            <p>To add a new FIDO U2F Security Key to your account:</p>
+            <ol>
+                <li>Plug the security key into your computer's USB port.</li>
+                <li>If the security key has a button, touch it.</li>
+            </ol>
+            <hr />
+            <div class="text-center">
+                <div ng-show="deviceListening">
+                    <p><i class="fa fa-spin fa-spinner fa-2x"></i></p>
+                    <p>Waiting for you to touch the button on your security key...</p>
+                </div>
+                <div class="text-green" ng-show="deviceResponse">
+                    <p><i class="fa fa-check-circle fa-2x"></i></p>
+                    <p>Success!</p>
+                    Click the "Enable" button below to enable this security key for two-step login.
+                </div>
+                <div class="text-red" ng-show="deviceError">
+                    <p><i class="fa fa-warning fa-2x"></i></p>
+                    <p>Error!</p>
+                    <p>There was a problem reading the security key.</p>
+                    <button type="button" class="btn btn-default btn-flat" ng-click="readDevice()">Try again</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat"
+                ng-disabled="(!enabled && !deviceResponse) || submitTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="submitTwoStepForm.$loading"></i>
+            {{enabled ? 'Disable' : 'Enable'}}
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/settings/views/settingsTwoStepYubi.html

@@ -0,0 +1,127 @@
+<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 Login <small>yubikey</small>
+    </h4>
+</div>
+<form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise"
+      ng-if="!authed">
+    <div class="modal-body">
+        <p>Enter your master password to modify two-step login settings.</p>
+        <div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in authTwoStepForm.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-errors>
+            <label for="masterPassword">Master Password</label>
+            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword"
+                   class="form-control" required api-field />
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="authTwoStepForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="authTwoStepForm.$loading"></i>Continue
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>
+<form name="submitTwoStepForm" ng-submit="submitTwoStepForm.$valid && submit(updateModel)" api-form="submitPromise"
+      ng-if="authed">
+    <div class="modal-body">
+        <div class="callout callout-warning">
+            <h4><i class="fa fa-warning"></i> Warning <i class="fa fa-warning"></i></h4>
+            <p>
+                Due to platform limitations, YubiKeys cannot be used on all bitwarden applications. You should enable
+                another two-step login provider so that you can access your account when YubiKeys cannot be used.
+            </p>
+            <p>Supported platforms:</p>
+            <ul>
+                <li>Web vault on a device with a USB port that can accept your YubiKey.</li>
+                <li>Browser extensions.</li>
+                <li>
+                    Android on a device with
+                    <a href="https://en.wikipedia.org/wiki/List_of_NFC-enabled_mobile_devices" target="_blank">
+                        NFC capabilities
+                    </a>. Read more <a href="https://forum.yubico.com/viewtopic.php?f=26&t=1302" target="_blank">here</a>.
+                </li>
+            </ul>
+        </div>
+        <div ng-if="enabled">
+            <div class="callout callout-success">
+                <h4><i class="fa fa-check-circle"></i> Enabled</h4>
+                <p>Two-step log via YubiKey is enabled on your account.</p>
+            </div>
+        </div>
+        <div class="callout callout-danger validation-errors" ng-show="submitTwoStepForm.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in submitTwoStepForm.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <p>To add a new YubiKey to your account:</p>
+        <ol>
+            <li>Plug the YubiKey (NEO or 4 series) into your computer's USB port.</li>
+            <li>Select in the first empty <b>Key</b> field below.</li>
+            <li>Touch the YubiKey's button.</li>
+            <li>Save the form.</li>
+        </ol>
+        <hr />
+        <div class="form-group" show-errors>
+            <label for="key1">YubiKey #1</label>
+            <span ng-if="updateModel.key1.existingKey">
+                <a href="#" class="btn btn-link btn-xs" stop-click ng-click="remove(updateModel.key1)">[remove]</a>
+            </span>
+            <div ng-if="updateModel.key1.existingKey" class="monospaced">
+                {{updateModel.key1.existingKey}}
+            </div>
+            <input type="password" id="key1" name="Key1" ng-model="updateModel.key1.key" class="form-control" api-field
+                   ng-show="!updateModel.key1.existingKey" />
+        </div>
+        <div class="form-group" show-errors>
+            <label for="key2">YubiKey #2</label>
+            <span ng-if="updateModel.key2.existingKey">
+                <a href="#" class="btn btn-link btn-xs" stop-click ng-click="remove(updateModel.key2)">[remove]</a>
+            </span>
+            <div ng-if="updateModel.key2.existingKey" class="monospaced">
+                {{updateModel.key2.existingKey}}
+            </div>
+            <input type="password" id="key2" name="Key2" ng-model="updateModel.key2.key" class="form-control" api-field
+                   ng-show="!updateModel.key2.existingKey" />
+        </div>
+        <div class="form-group" show-errors>
+            <label for="key3">YubiKey #3</label>
+            <span ng-if="updateModel.key3.existingKey">
+                <a href="#" class="btn btn-link btn-xs" stop-click ng-click="remove(updateModel.key3)">[remove]</a>
+            </span>
+            <div ng-if="updateModel.key3.existingKey" class="monospaced">
+                {{updateModel.key3.existingKey}}
+            </div>
+            <input type="password" id="key3" name="Key3" ng-model="updateModel.key3.key" class="form-control" api-field
+                   ng-show="!updateModel.key3.existingKey" />
+        </div>
+        <strong>NFC Support</strong>
+        <div class="checkbox">
+            <label>
+                <input type="checkbox" name="Nfc" id="nfc" ng-model="updateModel.nfc" /> One of my keys supports NFC.
+            </label>
+        </div>
+        <p class="help-block">
+            If one of your YubiKeys supports NFC (such as a YubiKey NEO), you will be prompted on mobile devices whenever NFC
+            availability is detected.
+        </p>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="submitTwoStepForm.$loading || disableLoading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="submitTwoStepForm.$loading"></i>
+            Save
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="disable()" ng-disabled="disableLoading"
+                ng-if="enabled">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="disableLoading"></i>
+            Disable All Keys
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/settings/views/settingsUpdateKey.html

@@ -0,0 +1,47 @@
+<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> Update Encryption Key</h4>
+</div>
+<form name="form" ng-submit="form.$valid && save(form)" api-form="savePromise">
+    <div class="modal-body">
+        <p>
+            This is <b>NOT</b> a security notification indicating that anything is wrong or has been compromised on your
+            account. If interested, you can
+            <a href="https://help.bitwarden.com/article/update-encryption-key/" target="_blank">read more details here</a>.
+        </p>
+        <hr />
+        <p>
+            You are currently using an outdated encryption scheme. We've moved to larger encryption keys
+            that provide better security and access to newer features.
+        </p>
+        <p>
+            Updating your encryption key is quick and easy. Just type your master password below and you're done!
+            This update will eventually become mandatory.
+        </p>
+        <hr />
+        <div class="callout callout-warning">
+            <h4><i class="fa fa-warning"></i> Warning</h4>
+            After updating your encryption key, you are required to log out and back in to all bitwarden applications that you
+            are currently using (such as the mobile app or browser extensions). Failure to log out and back
+            in (which downloads your new encryption key) may result in data corruption. We will attempt to log you out
+            automatically, however it may be delayed.
+        </div>
+        <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" show-errors>
+            <label for="masterPassword">Master Password</label>
+            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="masterPassword" class="form-control"
+                   required api-field />
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Update Key
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/tools/toolsExportController.js

@@ -40,7 +40,8 @@
                             notes: decLogins[i].notes,
                             folder: decLogins[i].folderId && (decLogins[i].folderId in foldersDict) ?
                                 foldersDict[decLogins[i].folderId].name : null,
-                            favorite: decLogins[i].favorite ? 1 : null
+                            favorite: decLogins[i].favorite ? 1 : null,
+                            totp: decLogins[i].totp
                         };
 
                         exportLogins.push(login);

src/app/tools/toolsImportController.js

@@ -232,6 +232,16 @@
                     'importing from Google Chrome. See detailed instructions on our help site at ' +
                     '<a target="_blank" href="https://help.bitwarden.com/article/import-from-chrome/">' +
                     'https://help.bitwarden.com/article/import-from-chrome/</a>')
+            },
+            {
+                id: 'gnomejson',
+                name: 'GNOME Passwords and Keys/Seahorse (json)',
+                instructions: $sce.trustAsHtml('Make sure you have python-keyring and python-gnomekeyring installed. ' + 
+                    'Save the <a target="_blank" href="http://bit.ly/2sMldAI">GNOME Keyring Import/Export</a> ' +
+                    'python script by Luke Plant to your desktop as <code>pw_helper.py</code>. Open terminal and run ' +
+                    '<code>chmod +rx Desktop/pw_helper.py</code> and then ' +
+                    '<code>python Desktop/pw_helper.py export Desktop/my_passwords.json</code>. Then upload ' +
+                    'the resulting <code>my_passwords.json</code> file here to bitwarden.')
             }
         ];
 

src/app/tools/views/toolsExport.html

@@ -18,8 +18,8 @@
         </div>
         <div class="form-group" show-errors>
             <label for="masterPassword">Master Password</label>
-            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="model.masterPassword" class="form-control"
-                   master-password required api-field ng-model-options="{ 'updateOn': 'blur'}" />
+            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="model.masterPassword"
+                   class="form-control" master-password required api-field ng-model-options="{ 'updateOn': 'blur'}" />
         </div>
     </div>
     <div class="modal-footer">

src/app/vault/vaultAddLoginController.js

@@ -2,7 +2,7 @@
     .module('bit.vault')
 
     .controller('vaultAddLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
-        passwordService, selectedFolder, $analytics, checkedFavorite, $rootScope) {
+        passwordService, selectedFolder, $analytics, checkedFavorite, $rootScope, authService, $uibModal) {
         $analytics.eventTrack('vaultAddLoginController', { category: 'Modal' });
         $scope.folders = $rootScope.vaultFolders;
         $scope.login = {
@@ -10,6 +10,10 @@
             favorite: checkedFavorite === true
         };
 
+        authService.getUserProfile().then(function (profile) {
+            $scope.useTotp = profile.premium;
+        });
+
         $scope.savePromise = null;
         $scope.save = function (model) {
             var login = cipherService.encryptLogin(model);
@@ -57,4 +61,12 @@
         $scope.close = function () {
             $uibModalInstance.dismiss('close');
         };
+
+        $scope.showUpgrade = function () {
+            $uibModal.open({
+                animation: true,
+                templateUrl: 'app/views/premiumRequired.html',
+                controller: 'premiumRequiredController'
+            });
+        };
     });

src/app/vault/vaultAttachmentsController.js

@@ -0,0 +1,126 @@
+angular
+    .module('bit.vault')
+
+    .controller('vaultAttachmentsController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
+        loginId, $analytics, validationService, toastr, $timeout, authService, $uibModal) {
+        $analytics.eventTrack('vaultAttachmentsController', { category: 'Modal' });
+        $scope.login = {};
+        $scope.readOnly = true;
+        $scope.loading = true;
+        $scope.isPremium = true;
+        $scope.canUseAttachments = true;
+        var closing = false;
+
+        authService.getUserProfile().then(function (profile) {
+            $scope.isPremium = profile.premium;
+            return apiService.logins.get({ id: loginId }).$promise;
+        }).then(function (login) {
+            $scope.login = cipherService.decryptLogin(login);
+            $scope.readOnly = !login.Edit;
+            $scope.canUseAttachments = $scope.isPremium || $scope.login.organizationId;
+            $scope.loading = false;
+        }, function () {
+            $scope.loading = false;
+        });
+
+        $scope.save = function (form) {
+            var fileEl = document.getElementById('file');
+            var files = fileEl.files;
+            if (!files || !files.length) {
+                validationService.addError(form, 'file', 'Select a file.', true);
+                return;
+            }
+
+            $scope.savePromise = cipherService.encryptAttachmentFile(getKeyForLogin(), files[0]).then(function (encValue) {
+                var fd = new FormData();
+                var blob = new Blob([encValue.data], { type: 'application/octet-stream' });
+                fd.append('data', blob, encValue.fileName);
+                return apiService.ciphers.postAttachment({ id: loginId }, fd).$promise;
+            }).then(function (response) {
+                $analytics.eventTrack('Added Attachment');
+                $scope.login = cipherService.decryptLogin(response);
+
+                // reset file input
+                // ref: https://stackoverflow.com/a/20552042
+                fileEl.type = '';
+                fileEl.type = 'file';
+                fileEl.value = '';
+            }, function (err) {
+                if (err) {
+                    validationService.addError(form, 'file', err, true);
+                }
+                else {
+                    validationService.addError(form, 'file', 'Something went wrong.', true);
+                }
+            });
+        };
+
+        $scope.download = function (attachment) {
+            attachment.loading = true;
+
+            if (!$scope.canUseAttachments) {
+                attachment.loading = false;
+                alert('Premium membership is required to use this feature.');
+                return;
+            }
+
+            cipherService.downloadAndDecryptAttachment(getKeyForLogin(), attachment, true).then(function (res) {
+                $timeout(function () {
+                    attachment.loading = false;
+                });
+            }, function () {
+                $timeout(function () {
+                    attachment.loading = false;
+                });
+            });
+        };
+
+        function getKeyForLogin() {
+            if ($scope.login.organizationId) {
+                return cryptoService.getOrgKey($scope.login.organizationId);
+            }
+
+            return null;
+        }
+
+        $scope.remove = function (attachment) {
+            if (!confirm('Are you sure you want to delete this attachment (' + attachment.fileName + ')?')) {
+                return;
+            }
+
+            attachment.loading = true;
+            apiService.ciphers.delAttachment({ id: loginId, attachmentId: attachment.id }).$promise.then(function () {
+                attachment.loading = false;
+                $analytics.eventTrack('Deleted Attachment');
+                var index = $scope.login.attachments.indexOf(attachment);
+                if (index > -1) {
+                    $scope.login.attachments.splice(index, 1);
+                }
+            }, function () {
+                toastr.error('Cannot delete attachment.');
+                attachment.loading = false;
+            });
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+
+        $scope.$on('modal.closing', function (e, reason, closed) {
+            if (closing) {
+                return;
+            }
+
+            e.preventDefault();
+            closing = true;
+            $uibModalInstance.close(!!$scope.login.attachments && $scope.login.attachments.length > 0);
+        });
+
+        $scope.showUpgrade = function () {
+            $uibModal.open({
+                animation: true,
+                templateUrl: 'app/views/premiumRequired.html',
+                controller: 'premiumRequiredController'
+            });
+        };
+    });

src/app/vault/vaultController.js

@@ -199,6 +199,56 @@
             });
         };
 
+        $scope.attachments = function (login) {
+            authService.getUserProfile().then(function (profile) {
+                return {
+                    isPremium: profile.premium,
+                    orgUseStorage: login.organizationId && !!profile.organizations[login.organizationId].maxStorageGb
+                };
+            }).then(function (perms) {
+                if (!login.hasAttachments) {
+                    if (login.organizationId && !perms.orgUseStorage) {
+                        $uibModal.open({
+                            animation: true,
+                            templateUrl: 'app/views/paidOrgRequired.html',
+                            controller: 'paidOrgRequiredController',
+                            resolve: {
+                                orgId: function () { return login.organizationId; }
+                            }
+                        });
+                        return;
+                    }
+
+                    if (!login.organizationId && !perms.isPremium) {
+                        $uibModal.open({
+                            animation: true,
+                            templateUrl: 'app/views/premiumRequired.html',
+                            controller: 'premiumRequiredController'
+                        });
+                        return;
+                    }
+                }
+
+                if (!login.organizationId && !cryptoService.getEncKey()) {
+                    toastr.error('You cannot use this feature until you update your encryption key.', 'Feature Unavailable');
+                    return;
+                }
+
+                var attachmentModel = $uibModal.open({
+                    animation: true,
+                    templateUrl: 'app/vault/views/vaultAttachments.html',
+                    controller: 'vaultAttachmentsController',
+                    resolve: {
+                        loginId: function () { return login.id; }
+                    }
+                });
+
+                attachmentModel.result.then(function (hasAttachments) {
+                    login.hasAttachments = hasAttachments;
+                });
+            });
+        };
+
         $scope.editFolder = function (folder) {
             var editModel = $uibModal.open({
                 animation: true,

src/app/vault/vaultEditLoginController.js

@@ -2,15 +2,19 @@
     .module('bit.vault')
 
     .controller('vaultEditLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
-        passwordService, loginId, $analytics, $rootScope) {
+        passwordService, loginId, $analytics, $rootScope, authService, $uibModal) {
         $analytics.eventTrack('vaultEditLoginController', { category: 'Modal' });
         $scope.folders = $rootScope.vaultFolders;
         $scope.login = {};
         $scope.readOnly = false;
 
-        apiService.logins.get({ id: loginId }, function (login) {
+        authService.getUserProfile().then(function (profile) {
+            $scope.useTotp = profile.premium;
+            return apiService.logins.get({ id: loginId }).$promise;
+        }).then(function (login) {
             $scope.login = cipherService.decryptLogin(login);
             $scope.readOnly = !login.Edit;
+            $scope.useTotp = $scope.useTotp || $scope.login.organizationUseTotp;
         });
 
         $scope.save = function (model) {
@@ -94,4 +98,12 @@
         $scope.close = function () {
             $uibModalInstance.dismiss('cancel');
         };
+
+        $scope.showUpgrade = function () {
+            $uibModal.open({
+                animation: true,
+                templateUrl: 'app/views/premiumRequired.html',
+                controller: 'premiumRequiredController'
+            });
+        };
     });

src/app/vault/vaultShareLoginController.js

@@ -2,7 +2,7 @@
     .module('bit.vault')
 
     .controller('vaultShareLoginController', function ($scope, apiService, $uibModalInstance, authService, cipherService,
-        loginId, $analytics, $state) {
+        loginId, $analytics, $state, cryptoService, $q, toastr) {
         $analytics.eventTrack('vaultShareLoginController', { category: 'Modal' });
         $scope.model = {};
         $scope.login = {};
@@ -111,23 +111,63 @@
 
         $scope.submitPromise = null;
         $scope.submit = function (model) {
-            $scope.login.organizationId = model.organizationId;
+            var orgKey = cryptoService.getOrgKey(model.organizationId);
 
-            var request = {
-                collectionIds: [],
-                cipher: cipherService.encryptLogin($scope.login)
-            };
+            var errorOnUpload = false;
+            var attachmentSharePromises = [];
+            if ($scope.login.attachments) {
+                for (var i = 0; i < $scope.login.attachments.length; i++) {
+                    (function (attachment) {
+                        var promise = cipherService.downloadAndDecryptAttachment(null, attachment, false)
+                            .then(function (decData) {
+                                return cryptoService.encryptToBytes(decData.buffer, orgKey);
+                            }).then(function (encData) {
+                                if (errorOnUpload) {
+                                    return;
+                                }
 
-            for (var id in $scope.selectedCollections) {
-                if ($scope.selectedCollections.hasOwnProperty(id)) {
-                    request.collectionIds.push(id);
+                                var fd = new FormData();
+                                var blob = new Blob([encData], { type: 'application/octet-stream' });
+                                var encFilename = cryptoService.encrypt(attachment.fileName, orgKey);
+                                fd.append('data', blob, encFilename);
+
+                                return apiService.ciphers.postShareAttachment({
+                                    id: loginId,
+                                    attachmentId: attachment.id,
+                                    orgId: model.organizationId
+                                }, fd).$promise;
+                            }, function (err) {
+                                errorOnUpload = true;
+                            });
+                        attachmentSharePromises.push(promise);
+                    })($scope.login.attachments[i]);
                 }
             }
 
-            $scope.submitPromise = apiService.ciphers.putShare({ id: loginId }, request, function (response) {
+            $scope.submitPromise = $q.all(attachmentSharePromises).then(function () {
+                if (errorOnUpload) {
+                    return;
+                }
+
+                $scope.login.organizationId = model.organizationId;
+
+                var request = {
+                    collectionIds: [],
+                    cipher: cipherService.encryptLogin($scope.login, null, true)
+                };
+
+                for (var id in $scope.selectedCollections) {
+                    if ($scope.selectedCollections.hasOwnProperty(id)) {
+                        request.collectionIds.push(id);
+                    }
+                }
+
+                return apiService.ciphers.putShare({ id: loginId }, request).$promise;
+            }).then(function (response) {
                 $analytics.eventTrack('Shared Login');
+                toastr.success('Login has been shared.');
                 $uibModalInstance.close(model.organizationId);
-            }).$promise;
+            });
         };
 
         $scope.close = function () {

src/app/vault/vaultSharedController.js

@@ -2,7 +2,7 @@
     .module('bit.vault')
 
     .controller('vaultSharedController', function ($scope, apiService, cipherService, $analytics, $q, $localStorage,
-        $uibModal, $filter, $rootScope) {
+        $uibModal, $filter, $rootScope, authService, cryptoService) {
         $scope.logins = [];
         $scope.collections = [];
         $scope.loading = true;
@@ -52,6 +52,54 @@
                 'Edit the login and copy it manually instead.');
         };
 
+        $scope.attachments = function (login) {
+            authService.getUserProfile().then(function (profile) {
+                return {
+                    isPremium: profile.premium,
+                    orgUseStorage: login.organizationId && !!profile.organizations[login.organizationId].maxStorageGb
+                };
+            }).then(function (perms) {
+                if (login.organizationId && !perms.orgUseStorage) {
+                    $uibModal.open({
+                        animation: true,
+                        templateUrl: 'app/views/paidOrgRequired.html',
+                        controller: 'paidOrgRequiredController',
+                        resolve: {
+                            orgId: function () { return login.organizationId; }
+                        }
+                    });
+                    return;
+                }
+
+                if (!login.organizationId && !perms.isPremium) {
+                    $uibModal.open({
+                        animation: true,
+                        templateUrl: 'app/views/premiumRequired.html',
+                        controller: 'premiumRequiredController'
+                    });
+                    return;
+                }
+
+                if (!login.organizationId && !cryptoService.getEncKey()) {
+                    toastr.error('You cannot use this feature until you update your encryption key.', 'Feature Unavailable');
+                    return;
+                }
+
+                var attachmentModel = $uibModal.open({
+                    animation: true,
+                    templateUrl: 'app/vault/views/vaultAttachments.html',
+                    controller: 'vaultAttachmentsController',
+                    resolve: {
+                        loginId: function () { return login.id; }
+                    }
+                });
+
+                attachmentModel.result.then(function (hasAttachments) {
+                    login.hasAttachments = hasAttachments;
+                });
+            });
+        };
+
         $scope.filterByCollection = function (collection) {
             return function (cipher) {
                 if (!cipher.collectionIds || !cipher.collectionIds.length) {

src/app/vault/views/vault.html

@@ -86,6 +86,11 @@
                                                 <i class="fa fa-fw fa-pencil"></i> Edit
                                             </a>
                                         </li>
+                                        <li>
+                                            <a href="#" stop-click ng-click="attachments(login)">
+                                                <i class="fa fa-fw fa-paperclip"></i> Attachments
+                                            </a>
+                                        </li>
                                         <li ng-show="!login.organizationId">
                                             <a href="#" stop-click ng-click="share(login)">
                                                 <i class="fa fa-fw fa-share-alt"></i> Share
@@ -115,7 +120,9 @@
                             </td>
                             <td ng-click="select($event)">
                                 <a href="#" stop-click ng-click="editLogin(login)" stop-prop>{{login.name}}</a>
-                                <i class="fa fa-share-alt text-muted" title="Shared" ng-show="login.organizationId"
+                                <i class="fa fa-share-alt text-muted" title="Shared" ng-if="login.organizationId"
+                                   stop-prop></i>
+                                <i class="fa fa-paperclip text-muted" title="Attachments" ng-if="login.hasAttachments"
                                    stop-prop></i><br />
                                 <span class="text-sm text-muted" stop-prop>{{login.username}}</span>
                             </td>
@@ -189,6 +196,11 @@
                                                 <i class="fa fa-fw fa-pencil"></i> Edit
                                             </a>
                                         </li>
+                                        <li>
+                                            <a href="#" stop-click ng-click="attachments(login)">
+                                                <i class="fa fa-fw fa-paperclip"></i> Attachments
+                                            </a>
+                                        </li>
                                         <li ng-show="!login.organizationId">
                                             <a href="#" stop-click ng-click="share(login)">
                                                 <i class="fa fa-fw fa-share-alt"></i> Share
@@ -219,7 +231,10 @@
                             <td ng-click="select($event)">
                                 <a href="#" stop-click ng-click="editLogin(login)" stop-prop>{{login.name}}</a>
                                 <i class="fa fa-star text-muted" title="Favorite" ng-show="login.favorite" stop-prop></i>
-                                <i class="fa fa-share-alt text-muted" title="Shared" ng-show="login.organizationId" stop-prop></i>
+                                <i class="fa fa-share-alt text-muted" title="Shared" ng-show="login.organizationId"
+                                   stop-prop></i>
+                                <i class="fa fa-paperclip text-muted" title="Attachments" ng-if="login.hasAttachments"
+                                   stop-prop></i>
                                 <br />
                                 <span class="text-sm text-muted" stop-prop>{{login.username}}</span>
                             </td>

src/app/vault/views/vaultAddLogin.html

@@ -56,7 +56,7 @@
                 </div>
             </div>
             <div class="col-md-6">
-                <div class="form-group" show-errors>
+                <div class="form-group" show-errors style="margin-bottom: 5px;">
                     <div class="pull-right password-options">
                         <i class="fa fa-lg fa-refresh" uib-tooltip="Generate Password" tooltip-placement="left" ng-click="generatePassword()"></i>
                         <i class="fa fa-lg fa-eye" uib-tooltip="Toggle Password" tooltip-placement="left" password-viewer="#password"></i>
@@ -75,7 +75,24 @@
                         </span>
                     </div>
                 </div>
-                <div style="margin: -10px 0 15px 0;" password-meter="login.password" password-meter-username="login.username" outer-class="xs"></div>
+                <div password-meter="login.password" password-meter-username="login.username"
+                     outer-class="xs" class="password-meter"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group" show-errors>
+                    <label for="totp">Authenticator Key (TOTP)</label>
+                    <input type="text" id="totp" name="Totp" ng-model="login.totp" class="form-control"
+                           ng-readonly="readOnly" api-field />
+                </div>
+            </div>
+            <div class="col-md-6 totp-col">
+                <div totp="login.totp" id="verification-code" ng-if="useTotp"></div>
+                <div ng-if="!useTotp">
+                    <a href="#" stop-click ng-click="showUpgrade()"><img src="images/totp-countdown.png" alt="" /></a>
+                    <span class="label label-info clickable" ng-click="showUpgrade()">{{fromOrg ? 'UPGRADE' : 'PREMIUM'}}</span>
+                </div>
             </div>
         </div>
         <div class="form-group" show-errors>

src/app/vault/views/vaultAttachments.html

@@ -0,0 +1,75 @@
+<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-paperclip"></i> Secure Attachments <small>{{login.name}}</small>
+    </h4>
+</div>
+<form name="form" ng-submit="form.$valid && save(form)" api-form="savePromise">
+    <div class="modal-body">
+        <div ng-if="loading">
+            Loading...
+        </div>
+        <div ng-if="!loading && !login.attachments.length">
+            There are no attachments for this login.
+        </div>
+        <div class="table-responsive" ng-if="login.attachments.length" style="margin: 0;">
+            <table class="table table-striped table-hover table-vmiddle" style="margin: 0;">
+                <tbody>
+                    <tr ng-repeat="attachment in login.attachments | orderBy: ['fileName']">
+                        <td style="width: 70px;">
+                            <div class="btn-group" data-append-to=".modal">
+                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                                    <i class="fa fa-cog"></i> <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li>
+                                        <a href="#" stop-click ng-click="download(attachment)">
+                                            <i class="fa fa-fw fa-download"></i> Download
+                                        </a>
+                                        <a href="#" stop-click ng-click="remove(attachment)" class="text-red"
+                                           ng-show="!readOnly">
+                                            <i class="fa fa-fw fa-trash"></i> Delete
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" stop-click ng-click="download(attachment)">{{attachment.fileName}}</a>
+                            <i class="fa fa-spinner fa-spin text-muted" ng-if="attachment.loading"></i>
+                        </td>
+                        <td style="width: 90px; min-width: 90px;">
+                            {{attachment.size}}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div ng-if="!readOnly">
+            <hr />
+            <h4>Add New Attachment</h4>
+            <div class="callout callout-warning" ng-if="!canUseAttachments">
+                <h4>Premium Membership Required</h4>
+                <p>Premium membership is required to use this feature.</p>
+                <button type="button" class="btn btn-default btn-flat" ng-click="showUpgrade()">Learn More</button>
+            </div>
+            <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" show-error ng-if="canUseAttachments">
+                <label for="file" class="sr-only">File</label>
+                <input type="file" id="file" name="file" />
+                <p class="help-block">Maximum size per file is 100 MB.</p>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading" ng-if="!readOnly && canUseAttachments">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Save
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/vault/views/vaultEditLogin.html

@@ -67,7 +67,7 @@
                 </div>
             </div>
             <div class="col-md-6">
-                <div class="form-group" show-errors>
+                <div class="form-group" show-errors style="margin-bottom: 5px;">
                     <div class="pull-right password-options">
                         <i class="fa fa-lg fa-refresh" uib-tooltip="Generate Password" tooltip-placement="left"
                            ng-click="generatePassword()" ng-show="!readOnly"></i>
@@ -87,8 +87,24 @@
                         </span>
                     </div>
                 </div>
-                <div style="margin: -10px 0 15px 0;" password-meter="login.password" password-meter-username="login.username"
-                     outer-class="xs"></div>
+                <div password-meter="login.password" password-meter-username="login.username"
+                     outer-class="xs" class="password-meter"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group" show-errors>
+                    <label for="totp">Authenticator Key (TOTP)</label>
+                    <input type="text" id="totp" name="Totp" ng-model="login.totp" class="form-control"
+                           ng-readonly="readOnly" api-field />
+                </div>
+            </div>
+            <div class="col-md-6 totp-col">
+                <div totp="login.totp" id="verification-code" ng-if="useTotp"></div>
+                <div ng-if="!useTotp">
+                    <a href="#" stop-click ng-click="showUpgrade()"><img src="images/totp-countdown.png" alt="" /></a>
+                    <span class="label label-info clickable" ng-click="showUpgrade()">{{fromOrg ? 'UPGRADE' : 'PREMIUM'}}</span>
+                </div>
             </div>
         </div>
         <div class="form-group" show-errors>

src/app/vault/views/vaultShared.html

@@ -62,6 +62,11 @@
                                                 <i class="fa fa-fw fa-pencil"></i> Edit
                                             </a>
                                         </li>
+                                        <li>
+                                            <a href="#" stop-click ng-click="attachments(login)">
+                                                <i class="fa fa-fw fa-paperclip"></i> Attachments
+                                            </a>
+                                        </li>
                                         <li ng-show="login.edit">
                                             <a href="#" stop-click ng-click="editCollections(login)">
                                                 <i class="fa fa-fw fa-cubes"></i> Collections
@@ -85,6 +90,8 @@
                             <td>
                                 <a href="#" stop-click ng-click="editLogin(login)">{{login.name}}</a>
                                 <i class="fa fa-star text-muted" title="Favorite" ng-show="login.favorite"></i>
+                                <i class="fa fa-paperclip text-muted" title="Attachments" ng-if="login.hasAttachments"
+                                   stop-prop></i><br />
                                 <div class="text-sm text-muted">{{login.username}}</div>
                             </td>
                         </tr>

src/app/views/paidOrgRequired.html

@@ -0,0 +1,13 @@
+<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-star"></i> Paid Plan Required</h4>
+</div>
+<div class="modal-body">
+    This feature is not available for free organizations. Switch to a paid plan to unlock more features.
+</div>
+<div class="modal-footer">
+    <button type="submit" class="btn btn-primary btn-flat" ng-click="go()" ng-if="admin">
+        Upgrade Organization
+    </button>
+    <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+</div>

src/app/views/premiumRequired.html

@@ -0,0 +1,36 @@
+<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-star"></i> Premium <span class="hidden-xs">Membership</span> Required</h4>
+</div>
+<div class="modal-body">
+    <p>This features requires a premium membership. Sign up for premium and get:</p>
+    <ul class="fa-ul">
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            1 GB of encrypted file storage.
+        </li>
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            Additional two-step login options such as YubiKey, FIDO U2F, and Duo.
+        </li>
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            TOTP verification code (2FA) generator for logins in your vault.
+        </li>
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            Priority customer support.
+        </li>
+        <li>
+            <i class="fa-li fa fa-check text-green"></i>
+            All future premium features. More coming soon!
+        </li>
+    </ul>
+    All for just <b>{{10 | currency:"$":0}}</b> /year.
+</div>
+<div class="modal-footer">
+    <button type="submit" class="btn btn-primary btn-flat" ng-click="go()">
+        Get Premium
+    </button>
+    <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+</div>

src/app/views/userLayout.html

@@ -64,10 +64,10 @@
                     <i class="fa fa-share-alt fa-fw"></i> <span>Shared</span>
                 </a>
             </li>
-            <li class="treeview" ng-class="{active: $state.is('backend.user.tools') || 
+            <li class="treeview" ng-class="{active: $state.is('backend.user.tools') ||
                 $state.is('backend.user.reportsBreach')}">
                 <a ui-sref="backend.user.tools"><i class="fa fa-wrench fa-fw"></i> <span>Tools</span></a>
-                <ul class="treeview-menu" ng-class="{'menu-open': $state.is('backend.user.tools') || 
+                <ul class="treeview-menu" ng-class="{'menu-open': $state.is('backend.user.tools') ||
                     $state.is('backend.user.reportsBreach')}">
                     <li ng-class="{active: $state.is('backend.user.reportsBreach')}">
                         <a ui-sref="backend.user.reportsBreach">
@@ -78,15 +78,31 @@
             </li>
             <li class="treeview"
                 ng-class="{active: $state.is('backend.user.settings') || $state.is('backend.user.settingsDomains') ||
-                $state.is('backend.user.settingsCreateOrg')}">
+                    $state.is('backend.user.settingsCreateOrg') || $state.is('backend.user.settingsTwoStep') ||
+                    $state.is('backend.user.settingsPremium') || $state.is('backend.user.settingsBilling')}">
                 <a ui-sref="backend.user.settings"><i class="fa fa-cogs fa-fw"></i> <span>Settings</span></a>
                 <ul class="treeview-menu" ng-class="{'menu-open': $state.is('backend.user.settings') ||
                         $state.is('backend.user.settingsDomains') || $state.is('backend.user.settingsCreateOrg')}">
+                    <li ng-class="{active: $state.is('backend.user.settingsPremium')}">
+                        <a ui-sref="backend.user.settingsPremium" ng-if="!main.userProfile || !main.userProfile.premium">
+                            <i class="fa fa-star fa-fw"></i> Go Premium!
+                        </a>
+                    </li>
                     <li ng-class="{active: $state.is('backend.user.settingsCreateOrg')}">
                         <a ui-sref="backend.user.settingsCreateOrg">
                             <i class="fa fa-plus-circle fa-fw"></i> New Organization
                         </a>
                     </li>
+                    <li ng-class="{active: $state.is('backend.user.settingsBilling')}">
+                        <a ui-sref="backend.user.settingsBilling" ng-if="main.userProfile && main.userProfile.premium">
+                            <i class="fa fa-circle-o fa-fw"></i> Billing
+                        </a>
+                    </li>
+                    <li ng-class="{active: $state.is('backend.user.settingsTwoStep')}">
+                        <a ui-sref="backend.user.settingsTwoStep">
+                            <i class="fa fa-fw fa-circle-o"></i> Two-step Login
+                        </a>
+                    </li>
                     <li ng-class="{active: $state.is('backend.user.settingsDomains')}">
                         <a ui-sref="backend.user.settingsDomains">
                             <i class="fa fa-fw fa-circle-o"></i> Domain Rules
@@ -130,5 +146,30 @@
     </section>
 </aside>
 
-<div class="content-wrapper" ui-view>
-</div>
+<div class="content-wrapper">
+    <div class="alert alert-danger alert-notification" ng-if="main.outdatedBrowser" ng-click="updateBrowser()">
+        <h4><i class="fa fa-warning fa-fw"></i> Update Your Browser</h4>
+        You are using an unsupported web browser. The web vault may not function properly.
+        <u>Update your browser now</u>.
+    </div>
+    <div class="alert alert-warning alert-notification" ng-click="updateKey()" ng-if="!main.usingEncKey">
+        <h4><i class="fa fa-key fa-fw"></i> Update Your Encryption Key</h4>
+        You are currently using an outdated encryption scheme.
+        <a href="#" stop-click>Learn more and update now</a>.
+    </div>
+    <div class="alert alert-warning alert-notification" ng-click="verifyEmail()"
+         ng-if="main.usingEncKey && main.userProfile && !main.userProfile.emailVerified">
+        <h4><i class="fa fa-envelope fa-fw"></i> Verify Your Email</h4>
+        <div ng-if="!verifyEmailSent">
+            Verify your account's email address to unlock access to all features.
+            <a href="#" stop-click>Send verification email now</a>.
+            <i class="fa fa-spin fa-refresh" ng-if="sendingVerify"></i>
+        </div>
+        <div ng-if="verifyEmailSent">
+            Check your email inbox for a verification link.
+            <a href="#" stop-click>Send verification email again</a>.
+            <i class="fa fa-spin fa-refresh" ng-if="sendingVerify"></i>
+        </div>
+    </div>
+    <div ui-view></div>
+</div>