recover and no providers

src/popup/app/accounts/accountsLoginTwoFactorController.js

@@ -67,11 +67,6 @@
             });
         };
 
-        $scope.lostApp = function () {
-            $analytics.eventTrack('Selected Lost 2FA App');
-            chrome.tabs.create({ url: 'https://help.bitwarden.com/article/lost-two-step-device/' });
-        };
-
         $scope.sendEmail = function (doToast) {
             if ($scope.providerType !== constants.twoFactorProvider.email) {
                 return;
@@ -126,7 +121,7 @@
                     providerPriority = provider[0].priority;
                 }
             }
-            return parseInt(providerType);
+            return providerType == null ? null : parseInt(providerType);
         }
 
         function init() {

src/popup/app/accounts/accountsTwoFactorMethodsController.js

@@ -2,7 +2,7 @@
     .module('bit.accounts')
 
     .controller('accountsTwoFactorMethodsController', function ($scope, $state, $stateParams, constantsService,
-        utilsService, i18nService) {
+        utilsService, i18nService, $analytics) {
         $scope.i18n = i18nService;
 
         var constants = constantsService;
@@ -49,6 +49,11 @@
             });
         };
 
+        $scope.recover = function () {
+            $analytics.eventTrack('Selected Recover');
+            chrome.tabs.create({ url: 'https://help.bitwarden.com/article/lost-two-step-device/' });
+        };
+
         function add(type) {
             for (var i = 0; i < constants.twoFactorProviderInfo.length; i++) {
                 if (constants.twoFactorProviderInfo[i].type === type) {

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

@@ -106,7 +106,7 @@
     </div>
     <div class="content">
         <div class="two-factor-key-page">
-            <iframe id="u2f_iframe"></iframe>
+            <iframe id="u2f_iframe" class="hide"></iframe>
             <p ng-if="!u2fReady">Loading...</p>
             <div ng-if="u2fReady">
                 <p>
@@ -130,3 +130,27 @@
         </p>
     </div>
 </form>
+
+<div ng-if="providerType === null">
+    <div class="header">
+        <div class="left">
+            <a ui-sref="login({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> {{i18n.login}}</a>
+        </div>
+        <div class="title">Login Unavailable</div>
+    </div>
+    <div class="content">
+        <div class="two-factor-key-page">
+            <p>
+                This account has two-factor login enabled, however, none of the configured two-factor providers are
+                supported by this web browser.
+            </p>
+            <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).
+            </p>
+        </div>
+        <p class="text-accent text-center">
+            <a href="#" stop-click ng-click="anotherMethod()">Use another two-step login method</a>
+        </p>
+    </div>
+</div>

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

@@ -13,6 +13,13 @@
                     <span class="text">{{provider.name}}</span>
                     <span class="detail">{{provider.description}}</span>
                 </a>
+                <a class="list-section-item wrap" href="#" stop-click ng-click="recover()">
+                    <span class="text">Recovery Code</span>
+                    <span class="detail">
+                        Lost access to all of your two-factor providers? Use your recovery code to disable
+                        all two-factor providers from your account.
+                    </span>
+                </a>
             </div>
         </div>
     </div>