From 64784d0e366507ec7303e14d4a2e73acc9d1dd55 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 26 Jun 2017 16:36:56 -0400
Subject: [PATCH] select another two factor method

---
 .../app/accounts/accountsLoginController.js   |  3 +-
 .../accountsLoginTwoFactorController.js       | 13 +++-
 .../accountsTwoFactorMethodsController.js     | 59 +++++++++++++++++++
 .../views/accountsLoginTwoFactor.html         | 18 +++++-
 .../views/accountsTwoFactorMethods.html       | 19 ++++++
 src/popup/app/config.js                       |  7 +++
 src/popup/index.html                          |  1 +
 7 files changed, 116 insertions(+), 4 deletions(-)
 create mode 100644 src/popup/app/accounts/accountsTwoFactorMethodsController.js
 create mode 100644 src/popup/app/accounts/views/accountsTwoFactorMethods.html

diff --git a/src/popup/app/accounts/accountsLoginController.js b/src/popup/app/accounts/accountsLoginController.js
index 0f1284b95a..7f87316154 100644
--- a/src/popup/app/accounts/accountsLoginController.js
+++ b/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 {
diff --git a/src/popup/app/accounts/accountsLoginTwoFactorController.js b/src/popup/app/accounts/accountsLoginTwoFactorController.js
index 3ded0d4d89..6c98f68d59 100644
--- a/src/popup/app/accounts/accountsLoginTwoFactorController.js
+++ b/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;
diff --git a/src/popup/app/accounts/accountsTwoFactorMethodsController.js b/src/popup/app/accounts/accountsTwoFactorMethodsController.js
new file mode 100644
index 0000000000..113d93a585
--- /dev/null
+++ b/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]);
+                }
+            }
+        }
+    });
diff --git a/src/popup/app/accounts/views/accountsLoginTwoFactor.html b/src/popup/app/accounts/views/accountsLoginTwoFactor.html
index 81ef904d05..3601e35df9 100644
--- a/src/popup/app/accounts/views/accountsLoginTwoFactor.html
+++ b/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>
diff --git a/src/popup/app/accounts/views/accountsTwoFactorMethods.html b/src/popup/app/accounts/views/accountsTwoFactorMethods.html
new file mode 100644
index 0000000000..06e6986e0b
--- /dev/null
+++ b/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>
diff --git a/src/popup/app/config.js b/src/popup/app/config.js
index eec1de97c0..e78e287195 100644
--- a/src/popup/app/config.js
+++ b/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',
diff --git a/src/popup/index.html b/src/popup/index.html
index 88f45037b2..c26afee0ef 100644
--- a/src/popup/index.html
+++ b/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>