recovery code

src/app/settings/settingsTwoStepController.js

@@ -51,4 +51,13 @@
                 provider.enabled = enabled;
             });
         };
+
+        $scope.viewRecover = function () {
+
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/settings/views/settingsTwoStepRecover.html',
+                controller: 'settingsTwoStepRecoverController'
+            });
+        }
     });

src/app/settings/settingsTwoStepRecoverController.js

@@ -0,0 +1,44 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsTwoStepRecoverController', function ($scope, apiService, $uibModalInstance, cryptoService,
+        $analytics) {
+        $analytics.eventTrack('settingsTwoStepRecoverController', { category: 'Modal' });
+        $scope.code = null;
+
+        $scope.auth = function (model) {
+            var masterPasswordHash = cryptoService.hashPassword(model.masterPassword);
+
+            $scope.authPromise = apiService.twoFactor.getRecover({}, {
+                masterPasswordHash: masterPasswordHash
+            }).$promise.then(function (apiResponse) {
+                $scope.code = formatString(apiResponse.Code);
+                $scope.authed = true;
+            });
+        };
+
+        $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>' +
+                '<pre>' + $scope.code + '</pre></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/views/settingsTwoStep.html

@@ -4,10 +4,15 @@
 <section class="content">
     <div class="box box-danger">
         <div class="box-header with-border">
-            <h3 class="box-title">Recovery Code</h3>
+            <h3 class="box-title"><i class="fa fa-warning"></i> Recovery Code <i class="fa fa-warning"></i></h3>
         </div>
         <div class="box-body">
-            Get it!
+            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 won't 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">

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>