#84: Enable/disable TOTP in UI

docs-web/src/main/webapp/src/app/docs/app.js

@@ -5,7 +5,7 @@
  */
 angular.module('docs',
     // Dependencies
-    ['ui.router', 'ui.route', 'ui.bootstrap', 'ui.keypress', 'ui.validate', 'dialog', 'ngProgress',
+    ['ui.router', 'ui.route', 'ui.bootstrap', 'ui.keypress', 'ui.validate', 'dialog', 'ngProgress', 'monospaced.qrcode',
       'ui.sortable', 'restangular', 'ngSanitize', 'ngTouch', 'colorpicker.module', 'angularFileUpload']
   )
 

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

@@ -3,5 +3,51 @@
 /**
  * Settings security controller.
  */
-angular.module('docs').controller('SettingsSecurity', function() {
+angular.module('docs').controller('SettingsSecurity', function($scope, User, $dialog, $modal, Restangular) {
+  User.userInfo().then(function(data) {
+    $scope.user = data;
+  });
+
+  /**
+   * Enable TOTP.
+   */
+  $scope.enableTotp = function() {
+    var title = 'Enable two-factor authentication';
+    var msg = 'Make sure you have a TOTP-compatible application on your phone ready to add a new account';
+    var btns = [{result:'cancel', label: 'Cancel'}, {result:'ok', label: 'OK', cssClass: 'btn-primary'}];
+
+    $dialog.messageBox(title, msg, btns, function(result) {
+      if (result == 'ok') {
+        Restangular.one('user/enable_totp').post().then(function(data) {
+          $scope.secret = data.secret;
+          User.userInfo(true).then(function(data) {
+            $scope.user = data;
+          })
+        });
+      }
+    });
+  };
+
+  /**
+   * Disable TOTP.
+   */
+  $scope.disableTotp = function() {
+    $modal.open({
+      templateUrl: 'partial/docs/settings.security.disabletotp.html',
+      controller: 'SettingsSecurityModalDisableTotp'
+    }).result.then(function (password) {
+      if (password == null) {
+        return;
+      }
+
+      // Disable TOTP
+      Restangular.one('user/disable_totp').post('', {
+        password: password
+      }).then(function() {
+        User.userInfo(true).then(function(data) {
+          $scope.user = data;
+        })
+      });
+    });
+  };
 });

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

@@ -0,0 +1,11 @@
+'use strict';
+
+/**
+ * Settings modal disable TOTP controller.
+ */
+angular.module('docs').controller('SettingsSecurityModalDisableTotp', function ($scope, $modalInstance) {
+  $scope.password = '';
+  $scope.close = function(password) {
+    $modalInstance.close(password);
+  }
+});

docs-web/src/main/webapp/src/index.html

@@ -38,6 +38,7 @@
     <script src="lib/angular.colorpicker.js" type="text/javascript"></script>
     <script src="lib/angular.file-upload.js" type="text/javascript"></script>
     <script src="lib/angular.ngprogress.js" type="text/javascript"></script>
+    <script src="lib/angular.qrcode.js" type="text/javascript"></script>
     <script src="app/docs/app.js" type="text/javascript"></script>
     <script src="app/docs/controller/Main.js" type="text/javascript"></script>
     <script src="app/docs/controller/document/Document.js" type="text/javascript"></script>
@@ -58,6 +59,7 @@
     <script src="app/docs/controller/settings/SettingsDefault.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsAccount.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsSecurity.js" type="text/javascript"></script>
+    <script src="app/docs/controller/settings/SettingsSecurityModalDisableTotp.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsSession.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsLog.js" type="text/javascript"></script>
     <script src="app/docs/controller/settings/SettingsUser.js" type="text/javascript"></script>

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

@@ -0,0 +1,18 @@
+<div class="modal-header">
+  <h3>Disable two-factor authentication</h3>
+</div>
+<div class="modal-body">
+  <p class="text-danger">
+    Your account will not be protected by the two-factor authentication anymore.
+  </p>
+  <p>
+    <label for="password">Confirm your password</label>
+    <input class="form-control" type="password" id="password" ng-model="password" />
+  </p>
+</div>
+<div class="modal-footer">
+  <button ng-click="close(password)" class="btn btn-warning">
+    Disable two-factor authentication
+  </button>
+  <button ng-click="close(null)" class="btn btn-default">Cancel</button>
+</div>

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

@@ -1 +1,43 @@
-<h1>Two-factor <small>authentication</small></h1>
+<h1>
+  Two-factor <small>authentication</small>
+  <span class="label" ng-class="{ 'label-success': user.totp_enabled, 'label-danger': !user.totp_enabled }">
+    {{ user.totp_enabled ? 'Enabled' : 'Disabled' }}
+  </span>
+</h1>
+
+<div ng-if="!user.totp_enabled">
+  <p>
+    Two-factor authentication allows you to add a layer of security on your <strong>Sismics Docs</strong> account.<br/>
+    Before activating this feature, make sure you have a TOTP-compatible app on your phone:
+  </p>
+  <ul>
+    <li>For Android, iOS, and Blackberry: <a href="https://support.google.com/accounts/answer/1066447" target="_blank">Google Authenticator</a></li>
+    <li>For Android and iOS: <a href="https://guide.duo.com/third-party-accounts" target="_blank">Duo Mobile</a></li>
+    <li>For Windows Phone: <a href="https://www.microsoft.com/en-US/store/apps/Authenticator/9WZDNCRFJ3RJ" target="_blank">Authenticator</a></li>
+  </ul>
+  <p>
+    Those applications automatically generate a validation code that changes after a certain period of time.<br/>
+    You will be required to enter this validation code each time you login on <strong>Sismics Docs</strong>.
+  </p>
+  <p>
+    <button class="btn btn-primary" ng-click="enableTotp()">Enable two-factor authentication</button>
+  </p>
+</div>
+
+<div ng-if="user.totp_enabled">
+  <div ng-if="secret">
+    <p>Your secret key is: <strong>{{ secret }}</strong></p>
+    <qrcode data="otpauth://totp/Sismics%20Docs?secret={{ secret }}" size="200"></qrcode>
+    <p class="text-danger">
+      <strong>Configure your TOTP app on your phone with this secret key now, you will not be able to access it later.</strong>
+    </p>
+  </div>
+  <p>
+    Two-factor authentication is enabled on your account.<br/>
+    Each time you login on <strong>Sismics Docs</strong>, you will be asked a validation code from your configured phone app.<br/>
+    If you loose your phone, you will not be able to login into your account but active sessions will allow you to regenerate a secrey key.
+  </p>
+  <p>
+    <button class="btn btn-warning" ng-click="disableTotp()">Disable two-factor authentication</button>
+  </p>
+</div>