select another two factor method

src/popup/app/accounts/accountsLoginController.js

@@ -41,7 +41,8 @@
                         animation: 'in-slide-left',
                         email: model.email,
                         masterPassword: model.masterPassword,
-                        providers: response.twoFactorProviders
+                        providers: response.twoFactorProviders,
+                        provider: null
                     });
                 }
                 else {

src/popup/app/accounts/accountsLoginTwoFactorController.js

@@ -2,7 +2,7 @@
     .module('bit.accounts')
 
     .controller('accountsLoginTwoFactorController', function ($scope, $state, authService, toastr, utilsService,
-        $analytics, i18nService, $stateParams, $filter, constantsService, $timeout, $window, cryptoService) {
+        $analytics, i18nService, $stateParams, $filter, constantsService, $timeout, $window, cryptoService, apiService) {
         $scope.i18n = i18nService;
         utilsService.initListSectionItemListeners($(document), angular);
 
@@ -56,6 +56,17 @@
             });
         };
 
+        $scope.anotherMethod = function () {
+            $analytics.eventTrack('Selected Another Two Factor Method');
+            $state.go('twoFactorMethods', {
+                animation: 'in-slide-up',
+                email: email,
+                masterPassword: masterPassword,
+                providers: providers,
+                provider: $scope.providerType
+            });
+        };
+
         function getDefaultProvider(twoFactorProviders) {
             var keys = Object.keys(twoFactorProviders);
             var providerType = null;

src/popup/app/accounts/accountsTwoFactorMethodsController.js

@@ -0,0 +1,59 @@
+angular
+    .module('bit.accounts')
+
+    .controller('accountsTwoFactorMethodsController', function ($scope, $state, $stateParams, constantsService,
+        utilsService, i18nService) {
+        $scope.i18n = i18nService;
+
+        var constants = constantsService;
+        var masterPassword = $stateParams.masterPassword;
+        var email = $stateParams.email;
+        var providers = $stateParams.providers;
+        var provider = $stateParams.provider;
+
+        $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) && (utilsService.isChrome() || !utilsService.isOpera())) {
+            add(constants.twoFactorProvider.u2f);
+        }
+
+        $scope.choose = function (provider) {
+            $state.go('twoFactor', {
+                animation: 'out-slide-down',
+                email: email,
+                masterPassword: masterPassword,
+                providers: providers,
+                provider: provider.type
+            });
+        };
+
+        $scope.cancel = function () {
+            $state.go('twoFactor', {
+                animation: 'out-slide-down',
+                email: email,
+                masterPassword: masterPassword,
+                providers: providers,
+                provider: provider
+            });
+        };
+
+        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/popup/app/accounts/views/accountsLoginTwoFactor.html

@@ -19,6 +19,10 @@
                         <label for="code" class="sr-only">{{i18n.verificationCode}}</label>
                         <input id="code" type="text" name="Code" placeholder="{{i18n.verificationCode}}" ng-model="token">
                     </div>
+                    <div class="list-section-item list-section-item-checkbox">
+                        <label for="remember">Remember me</label>
+                        <input id="remember" name="Remember" type="checkbox" ng-model="remember">
+                    </div>
                 </div>
                 <div class="list-section-footer">
                     {{i18n.enterTwoStepVerCode}}
@@ -26,7 +30,7 @@
             </div>
         </div>
         <p class="text-center text-accent">
-            <a href="" ng-click="lostApp()">{{i18n.lost2FAApp}}</a>
+            <a href="#" stop-click ng-click="anotherMethod()">Use another two-step login method</a>
         </p>
     </div>
 </form>
@@ -65,12 +69,19 @@
                         <label for="code" class="sr-only">{{i18n.verificationCode}}</label>
                         <input id="code" type="password" name="Code" ng-model="token">
                     </div>
+                    <div class="list-section-item list-section-item-checkbox">
+                        <label for="remember">Remember me</label>
+                        <input id="remember" name="Remember" type="checkbox" ng-model="remember">
+                    </div>
                 </div>
                 <div class="list-section-footer">
                     Touch the YubiKey button.
                 </div>
             </div>
         </div>
+        <p class="text-center text-accent">
+            <a href="#" stop-click ng-click="anotherMethod()">Use another two-step login method</a>
+        </p>
     </div>
 </form>
 
@@ -87,6 +98,9 @@
     <div class="content">
         <div ng-if="!u2fReady">Loading...</div>
         <div ng-if="u2fReady">Touch button</div>
-        <iframe id="u2f_iframe"></iframe>
+        <iframe id="u2f_iframe" class="hide"></iframe>
+        <p class="text-center text-accent">
+            <a href="#" stop-click ng-click="anotherMethod()">Use another two-step login method</a>
+        </p>
     </div>
 </form>

src/popup/app/accounts/views/accountsTwoFactorMethods.html

@@ -0,0 +1,19 @@
+<div class="header">
+    <div class="left">
+        <a href="#" ng-click="cancel()" stop-click>{{i18n.cancel}}</a>
+    </div>
+    <div class="title">Two-step Login Options</div>
+</div>
+<div class="content content-tabs">
+    <div class="list">
+        <div class="list-section">
+            <div class="list-section-items">
+                <a class="list-section-item wrap" href="#" stop-click ng-click="choose(provider)"
+                   ng-repeat="provider in providers | orderBy: 'displayOrder'">
+                    <span class="text">{{provider.name}}</span>
+                    <span class="detail">{{provider.description}}</span>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>

src/popup/app/config.js

@@ -68,6 +68,13 @@
                 data: { authorize: false },
                 params: { animation: null, email: null, masterPassword: null, providers: null, provider: null }
             })
+            .state('twoFactorMethods', {
+                url: '/two-factor-methods',
+                controller: 'accountsTwoFactorMethodsController',
+                templateUrl: 'app/accounts/views/accountsTwoFactorMethods.html',
+                data: { authorize: false },
+                params: { animation: null, email: null, masterPassword: null, providers: null, provider: null }
+            })
             .state('register', {
                 url: '/register',
                 controller: 'accountsRegisterController',

src/popup/index.html

@@ -59,6 +59,7 @@
     <script src="app/accounts/accountsModule.js"></script>
     <script src="app/accounts/accountsLoginController.js"></script>
     <script src="app/accounts/accountsLoginTwoFactorController.js"></script>
+    <script src="app/accounts/accountsTwoFactorMethodsController.js"></script>
     <script src="app/accounts/accountsHintController.js"></script>
     <script src="app/accounts/accountsRegisterController.js"></script>