tweaks to two factor modal

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

@@ -19,16 +19,7 @@
                 masterPasswordHash: _masterPasswordHash,
                 provider: 0 /* Only authenticator provider for now. */
             }, function (response) {
-                var key = response.AuthenticatorKey;
+                processResponse(response);
-                $scope.twoFactorModel = {
-                    enabled: response.TwoFactorEnabled,
-                    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) +
-                        '%26issuer=' + _issuer
-                };
             }).$promise;
         };
 
@@ -40,6 +31,19 @@
             return s.replace(/(.{4})/g, '$1 ').trim().toUpperCase();
         }
 
+        function processResponse(response) {
+            var key = response.AuthenticatorKey;
+            $scope.twoFactorModel = {
+                enabled: response.TwoFactorEnabled,
+                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) +
+                    '%26issuer=' + _issuer
+            };
+        }
+
         $scope.update = function (model) {
             var currentlyEnabled = $scope.twoFactorModel.enabled;
             if (currentlyEnabled && !confirm('Are you sure you want to disable two-step login?')) {
@@ -48,7 +52,7 @@
 
             var request = {
                 enabled: !currentlyEnabled,
-                token: model.token,
+                token: model.token.replace(' ', ''),
                 masterPasswordHash: _masterPasswordHash
             };
 
@@ -57,14 +61,16 @@
                     $analytics.eventTrack('Enabled Two-step Login');
                     toastr.success('Two-step login has been enabled.');
                     if (_profile.extended) _profile.extended.twoFactorEnabled = true;
+                    processResponse(response);
+                    $('#token').blur();
+                    model.token = null;
                 }
                 else {
                     $analytics.eventTrack('Disabled Two-step Login');
                     toastr.success('Two-step login has been disabled.');
                     if (_profile.extended) _profile.extended.twoFactorEnabled = false;
+                    $scope.close();
                 }
-
-                $scope.close();
             }).$promise;
         };
 

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

@@ -29,7 +29,7 @@
 <form name="updateTwoStepForm" ng-submit="updateTwoStepForm.$valid && update(updateModel)" api-form="updatePromise" ng-if="twoFactorModel">
     <div class="modal-body">
         <div ng-show="enabled()">
-            <p>Two-step login is enabled on your account. Below is the code required by your verification app.</p>
+            <p>Two-step login is <strong class="text-green">enabled</strong> on your account. Below is the code required by your verification app.</p>
             <p>Need a two-step verification app? Download one of the following:</p>
         </div>
         <div ng-show="!enabled()">
@@ -37,7 +37,7 @@
             <h4>1. Download a two-step verification app</h4>
         </div>
         <ul class="fa-ul">
-            <li><i class="fa-li fa fa-apple"></i> iOS devices: <a href="https://itunes.apple.com/en/app/authy/id494168017" target="_blank">Authy for iOS</a></li>
+            <li><i class="fa-li fa fa-apple"></i> iOS devices: <a href="https://itunes.apple.com/us/app/authy/id494168017?mt=8" target="_blank">Authy for iOS</a></li>
             <li><i class="fa-li fa fa-android"></i> Android devices: <a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank">Authy for Android</a></li>
             <li><i class="fa-li fa fa-windows"></i> Windows devices: <a href="https://www.microsoft.com/en-us/store/apps/authenticator/9wzdncrfj3rj" target="_blank">Microsoft Authenticator </a></li>
         </ul>
@@ -77,10 +77,10 @@
             </ul>
         </div>
         <hr ng-show="enabled()" />
-        <h4 style="margin-top: 30px;" ng-show="!enabled()">3. Enter the resulting verification code from the app</h4>
+        <h4 style="margin-top: 30px;"><span ng-show="!enabled()">3. </span>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" required api-field />
+            <input type="text" id="token" name="Token" placeholder="Verification Code" ng-model="updateModel.token" class="form-control" required api-field />
         </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>