Add recovery code information to two-step login modal, also make verification code required for all actions

src/Web/wwwroot/_references.js

@@ -60,7 +60,7 @@
 /// <reference path="lib/angulartics/angulartics-ga.js" />
 /// <reference path="lib/angular-toastr/angular-toastr.js" />
 /// <reference path="lib/angular-toastr/angular-toastr.min.js" />
-/// <reference path="lib/angular-toastr/angular-toastr.tpls.min.js" />
+/// <reference path="lib/angular-toastr/angular-toastr.tpls.js" />
 /// <reference path="lib/angular-ui-router/angular-ui-router.js" />
 /// <reference path="lib/bootstrap/js/bootstrap.min.js" />
 /// <reference path="lib/clipboard/clipboard.js" />

src/Web/wwwroot/app/settings.js

@@ -1,2 +1,2 @@
 angular.module("bit")
-.constant("appSettings", {"rememberedEmailCookieName":"bit.rememberedEmail","version":"1.2.2","environment":"Development","apiUri":"http://localhost:4000"});
+.constant("appSettings", {"rememberedEmailCookieName":"bit.rememberedEmail","version":"1.4.0","environment":"Development","apiUri":"http://localhost:4000"});

src/Web/wwwroot/app/settings/settingsTwoFactorController.js

@@ -22,7 +22,8 @@
                 var key = response.AuthenticatorKey;
                 $scope.twoFactorModel = {
                     enabled: response.TwoFactorEnabled,
-                    key: key.replace(/(.{4})/g, '$1 ').trim(),
+                    key: formatString(key),
+                    recovery: formatString(response.TwoFactorRecoveryCode),
                     qr: 'https://chart.googleapis.com/chart?chs=120x120&chld=L|0&cht=qr&chl=otpauth://totp/' +
                         _issuer + ':' + encodeURIComponent(_profile.email) +
                         '%3Fsecret=' + encodeURIComponent(key) +
@@ -31,6 +32,10 @@
             }).$promise;
         };
 
+        function formatString(s) {
+            return s.replace(/(.{4})/g, '$1 ').trim().toUpperCase();
+        }
+
         $scope.update = function (model) {
             var currentlyEnabled = $scope.twoFactorModel.enabled;
             if (currentlyEnabled && !confirm('Are you sure you want to disable two-step login?')) {
@@ -39,7 +44,7 @@
 
             var request = {
                 enabled: !currentlyEnabled,
-                token: model ? model.token : null,
+                token: model.token,
                 masterPasswordHash: _masterPasswordHash
             };
 

src/Web/wwwroot/app/settings/views/settingsTwoFactor.html

@@ -47,35 +47,48 @@
             <div class="col-md-4 text-center">
                 <p><img ng-src="{{twoFactorModel.qr}}" alt="QR" class="img-thumbnail" /></p>
             </div>
-            <div class="col-sm-8">
+            <div class="col-md-8">
                 <p><strong>Can't scan the code?</strong> You can add the code to your application manually using the following details:</p>
                 <ul class="list-unstyled">
-                    <li><strong>Key:</strong> <samp>{{twoFactorModel.key}}</samp></li>
+                    <li><strong>Key:</strong> <code>{{twoFactorModel.key}}</code></li>
                     <li><strong>Account:</strong> {{account}}</li>
                     <li><strong>Time based:</strong> Yes</li>
                 </ul>
             </div>
         </div>
-        <div ng-show="!enabled()">
+        <div ng-show="enabled()">
+            <hr />
+            <h4>Recovery Code</h4>
+            <p>
+                The recovery code allows you to access your account in the event that you lose your authenticator app.
+                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 below and keep it in a safe place.
+            </p>
+            <ul class="list-unstyled">
+                <li>
+                    <strong>Recovery Code:</strong> <code>{{twoFactorModel.recovery}}</code>
+                </li>
+            </ul>
+        </div>
         <div class="callout callout-danger validation-errors" ng-show="updateTwoStepForm.$errors">
             <h4>Errors have occured</h4>
             <ul>
                 <li ng-repeat="e in updateTwoStepForm.$errors">{{e}}</li>
             </ul>
         </div>
-            <h4 style="margin-top: 30px;">3. Enter the resulting verification code from the app</h4>
+        <hr ng-show="enabled()" />
-            <div class="form-group" show-errors ng-show="!twoFactorModel.enabled">
+        <h4 style="margin-top: 30px;" ng-show="!enabled()">3. Enter the resulting verification code from the app</h4>
+        <div class="form-group" show-errors>
             <label for="token" class="sr-only">Verification Code</label>
-                <input type="number" id="token" name="Token" placeholder="Verification Code" ng-model="updateModel.token" class="form-control" ng-required="!twoFactorModel.enabled" api-field />
+            <input type="number" id="token" name="Token" placeholder="Verification Code" ng-model="updateModel.token" class="form-control" required api-field />
-            </div>
-            <p>NOTE: After enabling two-step login, you will be required to enter the current code generated by your verification app each time you log in.</p>
         </div>
+        <p ng-show="!enabled()">NOTE: After enabling two-step login, you will be required to enter the current code generated by your verification app each time you log in.</p>
     </div>
     <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-flat" ng-disabled="updateTwoStepForm.$loading">
             <i class="fa fa-refresh fa-spin loading-icon" ng-show="updateTwoStepForm.$loading"></i>
-            <span ng-show="twoFactorModel.enabled">Disable Two-step</span>
+            <span ng-show="enabled()">Disable Two-step</span>
-            <span ng-show="!twoFactorModel.enabled">Enable Two-step</span>
+            <span ng-show="!enabled()">Enable Two-step</span>
         </button>
         <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
     </div>