Closes #268: test TOTP after activation

docs-web/src/main/webapp/src/app/docs/controller/settings/SettingsSecurity.js

@@ -53,4 +53,18 @@ angular.module('docs').controller('SettingsSecurity', function($scope, User, $di
       });
     });
   };
+
+  /**
+   * Test TOTP.
+   */
+  $scope.testValidationCodeSuccess = null;
+  $scope.testTotp = function (code) {
+    Restangular.one('user/test_totp').post('', {
+      code: code
+    }).then(function() {
+      $scope.testValidationCodeSuccess = true;
+    }, function () {
+      $scope.testValidationCodeSuccess = false;
+    });
+  };
 });

docs-web/src/main/webapp/src/locale/en.json

@@ -347,7 +347,10 @@
         "message": "Your account will not be protected by the two-factor authentication anymore.",
         "confirm_password": "Confirm your password",
         "submit": "Disable two-factor authentication"
-      }
+      },
+      "test_totp": "Please enter the validation code displayed on your phone :",
+      "test_code_success": "Validation code OK",
+      "test_code_fail": "This code is not valid, please double check that your phone is properly configured or disable Two-factor authentication"
     },
     "group": {
       "title": "Groups management",

docs-web/src/main/webapp/src/partial/docs/settings.security.html

@@ -19,13 +19,27 @@
 </div>
 
 <div ng-if="user.totp_enabled">
-  <div ng-if="secret">
+  <div class="row mt-30 mb-19" ng-if="secret">
+    <div class="col-sm-3">
       <p translate="settings.security.secret_key" translate-values="{ secret: secret }"></p>
       <qrcode data="otpauth://totp/Sismics%20Docs?secret={{ secret }}" size="200"></qrcode>
       <p class="text-danger">
         <strong>{{ 'settings.security.secret_key_warning' | translate }}</strong>
       </p>
     </div>
+    <div class="col-sm-3">
+      <p class="mt-30"><strong>{{ 'settings.security.test_totp' | translate }}</strong></p>
+      <form class="form-inline">
+        <input type="text" class="form-control" ng-model="testValidationCode" />
+        <button class="btn btn-primary" ng-click="testTotp(testValidationCode)">{{ 'ok' | translate }}</button>
+      </form>
+      <p class="mt-10" ng-if="testValidationCodeSuccess != null"
+         ng-class="{ 'text-success': testValidationCodeSuccess, 'text-danger': !testValidationCodeSuccess }">
+        <strong ng-if="testValidationCodeSuccess">{{ 'settings.security.test_code_success' | translate }}</strong>
+        <strong ng-if="!testValidationCodeSuccess">{{ 'settings.security.test_code_fail' | translate }}</strong>
+      </p>
+    </div>
+  </div>
   <p translate="settings.security.totp_enabled_message" translate-values="{ appName: appName }"></p>
   <p>
     <button class="btn btn-warning" ng-click="disableTotp()">{{ 'settings.security.disable_totp' | translate }}</button>