Deprecate qrious in favour of angular-qrcode

The requirements for this change is the bug described at: - neocotic/qrious#120 - https://bugzilla.mozilla.org/show_bug.cgi?id=1446472 - https://trac.torproject.org/projects/tor/ticket/27543
globaleaks · Dec 11, 2019 · 0cf61e9 · 0cf61e9
1 parent 67c72e9
commit 0cf61e9
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 37 deletions.
diff --git a/client/Gruntfile.js b/client/Gruntfile.js
@@ -47,7 +47,6 @@ module.exports = function(grunt) {
     copy: {
       sources: {
         files: [
-          { dest: "app/lib/css/", cwd: ".", src: ["node_modules/angular/angular-csp.css"], expand: true, flatten: true },
           { dest: "app/lib/css/", cwd: ".", src: ["node_modules/ui-bootstrap4/dist/ui-bootstrap-csp.css"], expand: true, flatten: true },
           { dest: "app/lib/css/", cwd: ".", src: ["node_modules/bootstrap/dist/css/bootstrap.min.css"], expand: true, flatten: true },
           { dest: "app/lib/css/", cwd: ".", src: ["node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"], expand: true, flatten: true },
@@ -62,6 +61,7 @@ module.exports = function(grunt) {
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/angular-dynamic-locale/tmhDynamicLocale.min.js"], expand: true, flatten: true },
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/angular-file-saver/dist/angular-file-saver.min.js"], expand: true, flatten: true },
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/angular-filter/dist/angular-filter.min.js"], expand: true, flatten: true },
+          { dest: "app/lib/js/", cwd: ".", src: ["node_modules/angular-qrcode/angular-qrcode.js"], expand: true, flatten: true},
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/angular-resource/angular-resource.min.js"], expand: true, flatten: true },
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/angular-route/angular-route.min.js"], expand: true, flatten: true },
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/angular-sanitize/angular-sanitize.min.js"], expand: true, flatten: true },
@@ -70,9 +70,9 @@ module.exports = function(grunt) {
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"], expand: true, flatten: true },
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/d3/dist/d3.min.js"], expand: true, flatten: true },
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/file-saver/FileSaver.min.js"], expand: true, flatten: true },
+          { dest: "app/lib/js/", cwd: ".", src: ["node_modules/qrcode-generator/qrcode.js"], expand: true, flatten: true },
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/stacktrace-js/dist/stacktrace.min.js"], expand: true, flatten: true },
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/topojson/dist/topojson.min.js"], expand: true, flatten: true},
-          { dest: "app/lib/js/", cwd: ".", src: ["node_modules/qrious/dist/qrious.min.js"], expand: true, flatten: true},
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"], expand: true, flatten: true },
           { dest: "app/lib/js/", cwd: ".", src: ["node_modules/ui-select/dist/select.min.js"], expand: true, flatten: true },
           { dest: "app/lib/js/locale", cwd: ".", src: ["node_modules/angular-i18n/angular-locale*"], expand: true, flatten: true },

diff --git a/client/app/index.html b/client/app/index.html
@@ -71,11 +71,12 @@ <h1>Error! :(</h1>
     <footer id="FooterBox" data-ng-if="started && !embedded" data-ng-include="'views/partials/footer.html'"></footer>
 
     <!-- build:js js/scripts.js -->
-    <script src="lib/js/qrious.min.js"></script>
+    <script src="lib/js/qrcode.js"></script>
     <script src="lib/js/angular.min.js"></script>
     <script src="lib/js/angular-aria.min.js"></script>
     <script src="lib/js/angular-file-saver.min.js"></script>
     <script src="lib/js/angular-filter.min.js"></script>
+    <script src="lib/js/angular-qrcode.js"></script>
     <script src="lib/js/angular-resource.min.js"></script>
     <script src="lib/js/angular-route.min.js"></script>
     <script src="lib/js/angular-sanitize.min.js"></script>

diff --git a/client/app/js/app.js b/client/app/js/app.js
@@ -10,6 +10,7 @@ var GLClient = angular.module("GLClient", [
     "ui.select",
     "tmh.dynamicLocale",
     "flow",
+    "monospaced.qrcode",
     "pascalprecht.translate",
     "ngSanitize",
     "ngFileSaver",

diff --git a/client/app/js/controllers/preferences.js b/client/app/js/controllers/preferences.js
@@ -19,6 +19,7 @@ GLClient.controller("PreferencesCtrl", ["$scope", "$rootScope", "$q", "$http", "
     $scope.editingName = false;
     $scope.editingEmail = false;
     $scope.showEncryptionKey = false;
+    $scope.qrcode_string = '';
 
     $scope.toggleNameEditing = function () {
       $scope.editingName = !$scope.editingName;
@@ -54,12 +55,7 @@ GLClient.controller("PreferencesCtrl", ["$scope", "$rootScope", "$q", "$http", "
           "args": {}
         }}).then(function(data){
           $scope.two_factor_secret = data.data;
-          var qr = new QRious({
-            value: "otpauth://totp/GlobaLeaks?secret=" + $scope.two_factor_secret,
-            size: "240"
-          });
-
-          $scope.two_factor_qrcode = qr.toDataURL();
+          $scope.qrcode_string = "otpauth://totp/GlobaLeaks?secret=" + $scope.two_factor_secret
 
           $scope.Utils.openConfirmableModalDialog("views/partials/enable_2fa_modal.html", {}, $scope).then(function (result) {
             return $http({method: "PUT", url: "user/operations", data:{

diff --git a/client/app/views/partials/enable_2fa.html b/client/app/views/partials/enable_2fa.html
@@ -17,7 +17,7 @@
       </div>
       <br />
       <div class="text-center">
-        <img data-ng-src="{{two_factor_qrcode}}" />
+        <qrcode data-ng-if="qrcode_string" data="{{qrcode_string}}" version="2" error-correction-level="Q" size="240" color="#000" background="#FFF"></qrcode>
         <div class="small text-bold">{{two_factor_secret}}</div>
       </div>
     </div>

diff --git a/client/npm-shrinkwrap.json b/client/npm-shrinkwrap.json
diff --git a/client/package.json b/client/package.json
@@ -18,6 +18,7 @@
     "angular-file-saver": "1.1.3",
     "angular-filter": "0.5.17",
     "angular-i18n": "1.7.9",
+    "angular-qrcode": "7.2.0",
     "angular-resource": "1.7.9",
     "angular-route": "1.7.9",
     "angular-sanitize": "1.7.9",
@@ -28,7 +29,7 @@
     "d3": "5.14.2",
     "fast-sha256": "1.1.1",
     "popper.js": "1.16.0",
-    "qrious": "4.0.2",
+    "qrcode-generator": "1.4.4",
     "stacktrace-js": "2.0.1",
     "topojson": "3.0.2",
     "ui-bootstrap4": "3.0.6",