#84: Ask for a TOTP validation code (web UI)

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

@@ -4,18 +4,28 @@
  * Login controller.
  */
 angular.module('docs').controller('Login', function($scope, $rootScope, $state, $dialog, User) {
+  $scope.codeRequired = false;
+
+  /**
+   * Login.
+   */
   $scope.login = function() {
     User.login($scope.user).then(function() {
       User.userInfo(true).then(function(data) {
         $rootScope.userInfo = data;
       });
       $state.go('document.default');
-    }, function() {
-      var title = 'Login failed';
-      var msg = 'Username or password invalid';
-      var btns = [{result:'ok', label: 'OK', cssClass: 'btn-primary'}];
-
-      $dialog.messageBox(title, msg, btns);
+    }, function(data) {
+      if (data.data.type == 'ValidationCodeRequired') {
+        // A TOTP validation code is required to login
+        $scope.codeRequired = true;
+      } else {
+        // Login truly failed
+        var title = 'Login failed';
+        var msg = 'Username or password invalid';
+        var btns = [{result: 'ok', label: 'OK', cssClass: 'btn-primary'}];
+        $dialog.messageBox(title, msg, btns);
+      }
     });
   };
 });

docs-web/src/main/webapp/src/partial/docs/login.html

@@ -17,6 +17,15 @@
         <input class="form-control" type="password" id="inputPassword" placeholder="Password" ng-model="user.password" />
       </div>
 
+      <span class="help-block" ng-if="codeRequired">
+        A validation code is required
+        <span class="glyphicon glyphicon-question-sign" title="You have activated the two-factor authentication on your account. Please enter a validation code generated by the phone app your configured."></span>
+      </span>
+      <div class="form-group" ng-if="codeRequired">
+        <label class="sr-only" for="inputCode">Validation code</label>
+        <input class="form-control" type="text" id="inputCode" placeholder="Validation code" ng-model="user.code" />
+      </div>
+
       <div class="checkbox">
         <label>
           <input type="checkbox" ng-model="user.remember" /> Remember me

docs-web/src/main/webapp/src/style/main.less

@@ -240,7 +240,11 @@ input[readonly].share-link {
 .login-box {
   background: rgba(255, 255, 255, 0.5);
   padding: 20px;
-  border-radius: 4px
+  border-radius: 4px;
+
+  .help-block, .checkbox {
+    color: white;
+  }
 }
 
 /* Styling for the ngProgress itself */