feat(core(js)): improve Google Authenticator on login page, add QR code

Closes #2722

UI/WebServerResources/Gruntfile.js

@@ -139,7 +139,8 @@ module.exports = function(grunt) {
       '<%= src %>/angular-ui-router/release/angular-ui-router{,.min}.js{,.map}',
       //'<%= src %>/ng-file-upload/ng-file-upload{,.min}.js{,map}',
       '<%= src %>/ng-sortable/dist/ng-sortable.min.js{,map}',
-      '<%= src %>/lodash/lodash{,.min}.js'
+      '<%= src %>/lodash/lodash{,.min}.js',
+      '<%= src %>/qrcodejs/qrcode{,.min}.js'
     ];
     for (var j = 0; j < js.length; j++) {
       var files = grunt.file.expand(grunt.template.process(js[j], {data: options}));

UI/WebServerResources/js/Common/sgQrCode.directive.js

@@ -0,0 +1,41 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  /* jshint validthis: true, newcap: false */
+  'use strict';
+
+  /**
+   * sgQrCode - Build a otpauth URI and generate a QR Code for the provided secret.
+   * @see {@link https://davidshimjs.github.io/qrcodejs/|QRCode.js}
+   * @memberof SOGo.Common
+   * @example:
+     <sg-qr-code text="secret"/>
+  */
+  sgQrCode.$inject = ['sgSettings'];
+  function sgQrCode(Settings) {
+    return {
+      restrict: 'E',
+      scope: {
+        text: '@',
+        width: '@',
+        height: '@'
+      },
+      link: link
+    };
+
+    function link(scope, element, attrs) {
+      var width = parseInt(scope.width) || 256,
+          height = parseInt(scope.height) || width,
+          uri = 'otpauth://totp/SOGo:' + Settings.activeUser('email') + '?secret=' + scope.text.replace(/=+$/, '') + '&issuer=SOGo';
+      new QRCode(element[0], {
+        text: uri,
+        width: width,
+        height: height
+      });
+    }
+  }
+
+  angular
+    .module('SOGo.Common')
+    .directive('sgQrCode', sgQrCode);
+})();

UI/WebServerResources/js/Main/Main.app.js

@@ -23,7 +23,9 @@
       if (/\blanguage=/.test($window.location.search))
         this.creds.language = $window.language;
       this.loginState = false;
-      this.showGoogleAuthenticatorCode = false;
+
+      // Code pattern for Google verification code
+      this.verificationCodePattern = '\\d{6}';
 
       // Show login once everything is initialized
       this.showLogin = false;
@@ -35,9 +37,8 @@
       Authentication.login(vm.creds)
         .then(function(data) {
 
-          if (typeof data.gamissingkey != 'undefined' && data.gamissingkey == 1) {
-            vm.showGoogleAuthenticatorCode = true;
-            vm.loginState = 'error';
+          if (data.gamissingkey) {
+            vm.loginState = 'googleauthenticatorcode';
           }
           else {
             vm.loginState = 'logged';
@@ -58,6 +59,11 @@
       return false;
     };
 
+    this.restoreLogin = function() {
+      vm.loginState = false;
+      delete vm.creds.verificationCode;
+    };
+
     this.showAbout = function($event) {
       $mdDialog.show({
         targetEvent: $event,

UI/WebServerResources/package.json

@@ -30,7 +30,8 @@
     "grunt-postcss": ">=0.6.0",
     "grunt-sass": "^3.1.0",
     "kss": "^3.0.1",
-    "node-sass": "^4.14.0",
+    "node-sass": "^4.14.1",
+    "qrcodejs": "^1.0.0",
     "time-grunt": "latest"
   },
   "browserslist": [