2fa cleanup

src/app/accounts/accountsLoginController.js

@@ -4,6 +4,7 @@ angular
     .controller('accountsLoginController', function ($scope, $rootScope, $cookies, apiService, cryptoService, authService,
         $state, constants, $analytics, $uibModal, $timeout, $window) {
         $scope.state = $state;
+        $scope.twoFactorProviderConstants = constants.twoFactorProvider;
 
         var returnState;
         if (!$state.params.returnState && $state.params.org) {

src/app/accounts/accountsTwoFactorMethodsController.js

@@ -7,41 +7,34 @@
         $scope.providers = [];
 
         if (providers.hasOwnProperty(constants.twoFactorProvider.authenticator)) {
-            $scope.providers.push({
-                id: constants.twoFactorProvider.authenticator,
-                name: 'Authenticator App'
-            });
+            add(constants.twoFactorProvider.authenticator);
         }
         if (providers.hasOwnProperty(constants.twoFactorProvider.yubikey)) {
-            $scope.providers.push({
-                id: constants.twoFactorProvider.yubikey,
-                name: 'YubiKey'
-            });
+            add(constants.twoFactorProvider.yubikey);
         }
         if (providers.hasOwnProperty(constants.twoFactorProvider.email)) {
-            $scope.providers.push({
-                id: constants.twoFactorProvider.email,
-                name: 'Email'
-            });
+            add(constants.twoFactorProvider.email);
         }
         if (providers.hasOwnProperty(constants.twoFactorProvider.duo)) {
-            $scope.providers.push({
-                id: constants.twoFactorProvider.duo,
-                name: 'Duo'
-            });
+            add(constants.twoFactorProvider.duo);
         }
         if (providers.hasOwnProperty(constants.twoFactorProvider.u2f)) {
-            $scope.providers.push({
-                id: constants.twoFactorProvider.u2f,
-                name: 'FIDO U2F Security Key'
-            });
+            add(constants.twoFactorProvider.u2f);
         }
 
         $scope.choose = function (provider) {
-            $uibModalInstance.close(provider.id);
+            $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/views/accountsLoginTwoFactor.html

@@ -1,8 +1,9 @@
-<div ng-if="twoFactorProvider === 0 || twoFactorProvider === 1">
-    <p class="login-box-msg" ng-if="twoFactorProvider === 0">
+<div ng-if="twoFactorProvider === twoFactorProviderConstants.authenticator ||
+     twoFactorProvider === twoFactorProviderConstants.email">
+    <p class="login-box-msg" ng-if="twoFactorProvider === twoFactorProviderConstants.authenticator">
         Enter the 6 digit verification code from your authenticator app.
     </p>
-    <p class="login-box-msg" ng-if="twoFactorProvider === 1">
+    <p class="login-box-msg" ng-if="twoFactorProvider === twoFactorProviderConstants.email">
         Enter the 6 digit verification code that was emailed to you.
     </p>
     <form name="twoFactorForm" ng-submit="twoFactorForm.$valid && twoFactor(token)" api-form="twoFactorPromise">
@@ -30,7 +31,8 @@
         </div>
     </form>
 </div>
-<div ng-if="twoFactorProvider === 3">
+
+<div ng-if="twoFactorProvider === twoFactorProviderConstants.yubikey">
     <p class="login-box-msg">
         Insert your YubiKey into a USB slot and touch its gold button.
     </p>
@@ -58,7 +60,7 @@
     </form>
 </div>
 
-<div ng-if="twoFactorProvider === 2">
+<div ng-if="twoFactorProvider === twoFactorProviderConstants.duo">
     <p class="login-box-msg">
         Complete logging in with Duo.
     </p>
@@ -85,7 +87,7 @@
     </form>
 </div>
 
-<div ng-if="twoFactorProvider === 4">
+<div ng-if="twoFactorProvider === twoFactorProviderConstants.u2f">
     <p class="login-box-msg">
         Complete logging in with U2F.
     </p>

src/app/accounts/views/accountsTwoFactorMethods.html

@@ -2,9 +2,10 @@
     <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 no-padding">
+<div class="modal-body">
     <div class="list-group" ng-repeat="provider in providers">
         <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>

src/app/constants.js

@@ -28,6 +28,45 @@ angular.module('bit')
             u2f: 4,
             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,
+                free: true,
+                image: 'authapp.png'
+            },
+            {
+                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,
+                image: 'yubico.png'
+            },
+            {
+                type: 2,
+                name: 'Duo',
+                description: 'Verify with Duo Security using the Duo Mobile app, SMS, phone call, or U2F security key.',
+                enabled: false,
+                image: 'duo.png'
+            },
+            {
+                type: 4,
+                name: 'FIDO U2F Security Key',
+                description: 'Use any FIDO U2F enabled security key to access your account.',
+                enabled: false,
+                image: 'fido.png'
+            },
+            {
+                type: 1,
+                name: 'Email',
+                description: 'Verification codes will be emailed to you.',
+                enabled: false,
+                image: 'gmail.png'
+            }
+        ],
         plans: {
             free: {
                 basePrice: 0,

src/app/settings/settingsTwoStepController.js

@@ -1,41 +1,9 @@
 angular
     .module('bit.settings')
 
-    .controller('settingsTwoStepController', function ($scope, apiService, authService, toastr, $analytics, constants,
+    .controller('settingsTwoStepController', function ($scope, apiService, toastr, $analytics, constants,
         $filter, $uibModal) {
-        $scope.providers = [
-            {
-                type: constants.twoFactorProvider.authenticator,
-                name: 'Authenticator App',
-                description: 'Use auth app.',
-                enabled: false,
-                free: true
-            },
-            {
-                type: constants.twoFactorProvider.yubikey,
-                name: 'YubiKey OTP',
-                description: '',
-                enabled: false
-            },
-            {
-                type: constants.twoFactorProvider.duo,
-                name: 'Duo',
-                description: '',
-                enabled: false
-            },
-            {
-                type: constants.twoFactorProvider.u2f,
-                name: 'FIDO U2F Security Key',
-                description: '',
-                enabled: false
-            },
-            {
-                type: constants.twoFactorProvider.email,
-                name: 'Email',
-                description: '',
-                enabled: false
-            }
-        ];
+        $scope.providers = constants.twoFactorProviderInfo;
 
         apiService.twoFactor.list({}, function (response) {
             for (var i = 0; i < response.Data.length; i++) {
@@ -50,80 +18,37 @@
             }
         });
 
-        authService.getUserProfile().then(function (profile) {
-            _profile = profile;
-        });
-
         $scope.edit = function (provider) {
             if (provider.type === constants.twoFactorProvider.authenticator) {
-                var authenticatorModal = $uibModal.open({
-                    animation: true,
-                    templateUrl: 'app/settings/views/settingsTwoStepAuthenticator.html',
-                    controller: 'settingsTwoStepAuthenticatorController',
-                    resolve: {
-                        enabled: function () { return provider.enabled; }
-                    }
-                });
-
-                authenticatorModal.result.then(function (enabled) {
-                    provider.enabled = enabled;
-                });
+                typeName = 'Authenticator';
             }
-            else if(provider.type === constants.twoFactorProvider.email) {
-                var emailModal = $uibModal.open({
-                    animation: true,
-                    templateUrl: 'app/settings/views/settingsTwoStepEmail.html',
-                    controller: 'settingsTwoStepEmailController',
-                    resolve: {
-                        enabled: function () { return provider.enabled; }
-                    }
-                });
-
-                emailModal.result.then(function (enabled) {
-                    provider.enabled = enabled;
-                });
+            else if (provider.type === constants.twoFactorProvider.email) {
+                typeName = 'Email';
             }
             else if (provider.type === constants.twoFactorProvider.yubikey) {
-                var yubiModal = $uibModal.open({
-                    animation: true,
-                    templateUrl: 'app/settings/views/settingsTwoStepYubi.html',
-                    controller: 'settingsTwoStepYubiController',
-                    resolve: {
-                        enabled: function () { return provider.enabled; }
-                    }
-                });
-
-                yubiModal.result.then(function (enabled) {
-                    provider.enabled = enabled;
-                });
+                typeName = 'Yubi';
             }
             else if (provider.type === constants.twoFactorProvider.duo) {
-                var yubiModal = $uibModal.open({
-                    animation: true,
-                    templateUrl: 'app/settings/views/settingsTwoStepDuo.html',
-                    controller: 'settingsTwoStepDuoController',
-                    resolve: {
-                        enabled: function () { return provider.enabled; }
-                    }
-                });
-
-                yubiModal.result.then(function (enabled) {
-                    provider.enabled = enabled;
-                });
+                typeName = 'Duo';
             }
             else if (provider.type === constants.twoFactorProvider.u2f) {
-                var u2fModal = $uibModal.open({
-                    animation: true,
-                    templateUrl: 'app/settings/views/settingsTwoStepU2f.html',
-                    controller: 'settingsTwoStepU2fController',
-                    resolve: {
-                        enabled: function () { return provider.enabled; }
-                    }
-                });
-
-                u2fModal.result.then(function (enabled) {
-                    provider.enabled = enabled;
-                });
+                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) {
+                provider.enabled = enabled;
+            });
         };
     });

src/app/settings/views/settingsTwoStep.html

@@ -19,26 +19,8 @@
                 <table class="table table-striped table-hover table-vmiddle">
                     <tbody>
                         <tr ng-repeat="provider in providers">
-                            <td style="width: 70px;">
-                                <div class="btn-group" data-append-to="body">
-                                    <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="edit(provider)">
-                                                <i class="fa fa-fw fa-pencil"></i>
-                                                {{provider.enabled ? 'Edit' : 'Enable'}}
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a href="#" stop-click ng-click="disable(provider)" class="text-red"
-                                               ng-if="provider.enabled">
-                                                <i class="fa fa-fw fa-ban"></i> Disable
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
+                            <td style="width: 120px; height: 75px;" align="center">
+                                <img alt="{{::provider.name}}" ng-src="{{'images/two-factor/' + provider.image}}" />
                             </td>
                             <td>
                                 <a href="#" stop-click ng-click="edit(provider)">{{::provider.name}}</a>